Echarts 统计图表

一、安装echarts依赖

npm install echarts --save

可参考官网：https://v-charts.js.org

安装完依赖后在package.json文件看到echarts相对应的版本号

二、使用步骤

1.在所需.vue文件中引入

var echarts = require('echarts')

2.需要用到统计图的位置定义div，一定要给这个div定义（id、宽、高）

<div id="main" style="width: 100%; height: 1400px"></div>

3.引入js

 methods: {
     drawChart() {
      // 基于准备好的dom，初始化echarts实例
      let myChart = echarts.init(document.getElementById('main'))

      this.$http
        .post('接口地址', {
          type: '可回收',
        })
        .then((res) => {
          console.log( res)
          var excellentCounts = res.data.data.excell
          var goodCounts = res.data.data.excel2
          var averageCounts = res.data.data.excel3
          var poorCounts = res.data.data.excel4

          // 指定图表的配置项和数据
          let option = {
            title: {
              text: '可回收物统计',
              left: 'center',
              top: '3%',
            },
            tooltip: {
              trigger: 'item',
            },
            legend: {
              // top: '5%',
              // left: 'center',
              orient: 'vertical',
              left: 'left',
            },
            series: [
              {
                name: '可回收物',
                type: 'pie',
                radius: ['40%', '70%'],
                avoidLabelOverlap: false,
                label: {
                  show: false,
                  position: 'center',
                },
                emphasis: {
                  label: {
                    show: true,
                    fontSize: '20',
                    fontWeight: 'bold',
                  },
                },
                labelLine: {
                  show: false,
                },
                data: [
                  { value: excellentCounts, name: '优' },   //value值是取得接口的数据
                  { value: goodCounts, name: '良' },
                  { value: averageCounts, name: '中' },
                  { value: poorCounts, name: '差' },
                ],
              },
            ],
          }
           // 使用刚指定的配置项和数据显示图表。
          myChart.setOption(option)
        })
    },
   }

效果图：

4.统计图样式的选择

echarts官网查看所有统计图，选取自己所需要的
https://echarts.apache.org/examples/zh/index.html
拷贝 option 内的内容覆盖js里 let option 内容即可

希望能帮助到刚接触echarts配置到项目的朋友