vue 运用eChars图反映数据

vue echars 网站: https://github.com/1002778764/vue-echarts/blob/master/README.zh_CN.md
echars 官网:       https://echarts.apache.org/examples/zh/index.html#chart-type-pie    
解决问题的网站:  https://www.jianshu.com/p/e2cae7807a0b

1.下载安装对应包  --并引入vue echars必须要引入的组件

/*安装 
npm install echarts@5.2.2
npm install vue-echarts@6.0.0
npm install tslib
npm install @vue/composition-api@1.3.0
npm install vue-demi

主要参考:
vue echars 网站: https://github.com/1002778764/vue-echarts/blob/master/README.zh_CN.md
echars 官网:       https://echarts.apache.org/examples/zh/index.html#chart-type-pie    
解决问题的网站:  https://www.jianshu.com/p/e2cae7807a0b
*/
import {
 getContractByTypeReport,
} from "../../page/Charts/ChartsDataAPI"; //引入api的js文件--用于获取数据接口的js文件
//使用vue  echars 必须要引入的组件  开始
import { use } from "echarts/core";  
import { CanvasRenderer } from "echarts/renderers";
import {
  TitleComponent,  //标题
  TooltipComponent,  //工具
  LegendComponent,
} from "echarts/components";
import VueECharts from "vue-echarts";  //引入vue echarts  组件
//使用vue echars 必须要引入的组件 结束

 

2、引入对应所需的vchars图标

import { PieChart  } from "echarts/charts";  //引入要是用的图标  PieChart代表饼图

 

2-1--对应{ }中写的单词需要参考Examples - Apache ECharts网站中对应图的完整代码-按需引入

 

3、使用上面定义的use将写的组件引入

//使用上面定义的use将写的组件引入
use([
 CanvasRenderer,
  PieChart ,   //使用饼图
  TitleComponent,
  TooltipComponent,
  LegendComponent,
])

 

4、注册vue charts 的组件

components: {
    "v-chart": VueECharts, //注册vue charts 的组件
  },

 <div>
          <!-- 引用组件 -->   
        <v-chart :option="ContractPieChart" class="echarts" />
      </div>

 

5、vue data中合同饼图配置

 data() {
    return {
      //合同饼图配置
      ContractPieChart: {
        title: {
          //图例标题
          text: "货主、承运、通用合同占比",
          subtext: "ContractNum Data",
          left: "center",
        },
        tooltip: {
          //左侧的图例
          trigger: "item",
        },
        legend: {
          //左侧的图例的显示方式
          orient: "vertical",
          left: "left",
        },
        series: [
          {
            name: "Access From",
            type: "pie",
            radius: "50%", //饼图半径
            data: [], //饼图数据
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: "rgba(0, 0, 0, 0.5)",
              },
            },
          },
        ],
      },
    };
  },

 

6、动态获取饼图所需信息--并给其值

 methods: {
    //获取饼图数据
    getContractPieData() {
      GetCotractNumCharts().then((res) => {
        if (res.code == 1) {
          if (res.data.length > 0) {
            res.data.forEach((item) => {
            //给饼图放数据处赋值
             this.ContractPieChart.series[0].data.push({
                 value:item.contract_count,
                 name:item.cname
              });
            });
          }
        }
      });
    },
  },

 

7、完成效果

 

标签：eChars,vue,echars,组件,引入,import,运用,echarts
来源： https://www.cnblogs.com/ZhuMeng-Chao/p/16340356.html