vue中使用echarts进行数据展示

vue中使用echarts

echarts的安装

npm install echarts --save

在vue-cli中引入echarts

import echarts from 'echarts'

全局注册echarts

Vue.prototype.$echarts = echarts

引入echarts以及在全局注册要写在main.js文件中（谨记）

vue项目中详细使用echarts

初始化echarts实例

var echarts = require("echarts");

绘制自己想要的图表

1. 先构建html架构模块和基本的css样式属性

<div class="showdata">
      <div id="chartColumn" ref="chart" :style="{width : '495px', height : '300px'}"></div>
      <div style="width: 10px;display: flex"></div>
      <div id="chartBar" :style="{width: '495px',height: '300px'}"></div>
    </div>

.showdata {
  display: flex;
}
#chartColumn {
  display: flex;
  background-color: rgba(36, 201, 196, 0.68);
  border: 1px solid #ccc;
}
#chartBar {
  display: flex;
  /*background-color: black;*/
  /*background-color: rgba(14, 226, 219, 0.13);*/
  background-color: rgba(58, 239, 218, 0.97);
  border: 1px solid #ccc;
}

2. 根据所需，绘图，将数据属性写入echarts中

drawColumnChart() {
      this.chartColumn = echarts.init(document.getElementById('chartColumn'));
      this.chartColumn.setOption({
        title: {
          text: '通过淘汰占比',
          left: 'center',
          top : 20
        },
        tooltip: {
          trigger: 'item',
          formatter : "{b} : {c} ({d}%)"
        },
        legend: {
          top :10,
          orient: 'vertical',
          left: 10
        },
        series: [
          {
            name: '面试状态',
            type: 'pie',
            radius: '50%',
            label: { normal: { show: true, formatter: "{b} : {c} ({d}%)" } },
            data: [
              { value: 50, name: '通过' },
              { value: 35, name: '淘汰' },
            ],
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.3)'
              }
            },
            itemStyle: {
              normal: {
                color: function (params) {
                  let colorList = [
                    "rgba(9,67,243,0.88)",
                    "rgba(241,214,47,0.97)"
                  ];
                  return colorList[params.dataIndex];
                }
              }
            }
          }
        ]
      });
    },