vue中使用ECharts实现饼图

vue中使用ECharts实现饼图

效果：

1.安装echarts和引入
1.安装echarts

npm install echarts --save

2.引入

//引入饼状图
import * as echarts from 'echarts'
//注册全局
Vue.prototype.$echarts = echarts

3.使用
html片段：

<div :style="piestyle">
      <el-card style="margin-left: 150px;margin-right: 150px;margin-top: 20px;">
        <div class="chart-container">
          <div id="chartPie" style="width:100%; height:550px;"></div>
        </div>
      </el-card>
    </div>

script片段：

data() {
      return {
        chartPie: '',
        typeName: [], //帖子类型名称
        typeNum: [], //帖子类型数量
      }
    },
    methods: {
      drawPieChart() {
        this.chartPie = this.$echarts.init(document.getElementById("chartPie"));
        this.chartPie.setOption({
          //设置标题,副标题,以及标题位置居中
          title: {
            text: '帖子统计(饼状图)',
            //subtext: '纯属虚构',
            x: 'center'
          },
          //具体点击某一项触发的样式内容
          tooltip: {
            trigger: 'item',
            formatter: "{a} <br/>{b} : {c} ({d}%)"
          },
          //左上侧分类条形符
          legend: {
            orient: 'vertical',
            left: 'left',
            data: []
          },
          //饼状图类型以及数据源
          series: [{
            name: '统计数量',
            type: 'pie',
            data: [],
            //设置饼状图扇形区域的样式
            itemStyle: {
              emphasis: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            },
          }]
        });
      },
      //动态获取饼状图的数据
      async initData() {
        this.$http.post("请求").then(response => {
          var getData = [];
          //先进行赋值
          for (let i = 0; i < response.data.target.length; i++) {
            var obj = new Object();
            obj.name = response.data.target[i].name;//名称
            obj.value = response.data.target[i].totalCard;//数量
            getData[i] = obj;
          }
          this.chartPie.setOption({
            legend: {
              data: response.data.target.name,
            },
            series: [{
              data: getData,
            }]
          });
        })

      },
      drawCharts() {
        this.drawPieChart();
      },
    },
    mounted() {
      this.initData();
      this.drawCharts();
    }

官网地址：
http://echarts.apache.org/zh/