vue-echarts入门使用

vue-echarts是基于echarts封装实现的一个组件库，技术文档可访问：https://github.com/ecomfe/vue-echarts查看

1、下载

npm

npm install echarts vue-echarts

cdn

<script src=“https://cdn.jsdelivr.net/npm/echarts@4.1.0/dist/echarts.js”>
<script src=“https://cdn.jsdelivr.net/npm/vue-echarts@4.0.2”>

2、文件内引入使用

*注：这种方式写的时候需要tooltips或者legend这类的时候，都需要import ‘echarts/lib/component/legend’;这样引入一下，不然不会显示出来

// 局部引入vue-echarts
import ECharts from 'vue-echarts';
import 'echarts/lib/chart/line';

3、html部分

<template>
  <div class="charts">
    <v-chart
      :options="options"
      auto-resize
      />
  </div>
</template>

4、css部分

样式中必须有.echarts宽高的定义，不然会不显示

<style scoped>
.charts{
  width: 100%;
  height: 100%;
}
.echarts {
  width: 100%;
  height: 100%;
}
</style>

5、配置项部分

环形图

  options: { // echarts配置项
    tooltip: { show: false }, // 提示框组件，环形图可以不用这个用其他的
    series: [ // 系列列表
      {
        name: '', // 系列名称
        type: 'pie', // 类型
        data: [3, 12, 4], // 数据，此处可以通过接口获取，使用this.options.series[0].data = 接口返回数据即可
        radius: ['60%', '81%'], // [内半径， 外半径], 可以是百分数，也可以直接是数值，不用数组只写单个百分数或数值就是正常的饼图
        center: ['50%', '50%'], // 圆心位置[横坐标，纵坐标]
        label: { // 饼图图形上的文本标签
          show: false,
          lineHeight: 20,
          padding: [0, -100],
          color: 'auto'
        },
        labelLine: { // 视觉引导线的长度
          length: 25,
          length2: 100
        },
        itemStyle: {
          // 饼图颜色采用渐变色
          color: (params) => {
            // 色值数组，从浅色到深色
            const colorList = [
              ['#A5ABFF', '#6C73FF'],
       	      ['#64BAFF', '#4487FF'],
        	  ['#53E7C9', '#29CB98']
            ];

            let index = params.dataIndex;

            // 柱子个数超过colorList设置的个数，循环使用
            if (index >= colorList.length) {
              index -= colorList.length;
            }

            // 这里的this.$echarts是项目中的echarts示例，改成对应的名字就好
            return new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [{
              offset: 0,
              color: colorList[index][0]
            }, {
              offset: 1,
              color: colorList[index][1]
            }]);
          }
        },
        emphasis: { // 饼图视觉引导线样式
          label: {
            show: true,
            verticalAlign: 'bottom', // 文字与视觉引导线的底部对齐
            lineHeight: 20,
            // 保证引导线上的文字水平位置正确
            padding: [0, -100],
            formatter: '{b} {gray|{d}%} {gray|{c}}', // 此处可以参考文档
            rich: {
              gray: {
                color: '#5B6479'
              }
            }
          },
          labelLine: {
            show: true,
            lineStyle: {
              shadowBlur: { // 引导线阴影
                shadowColor: 'rgba(58, 120, 214, 0.14)',
                shadowBlur: 12
              }
            }
          }
        }
      }
    ]
  }

效果：
中间的标题是使用定位写的，因为echarts原生的配置样式实在不好改，而需求的样式还根据需要变化不同的样式

只要能看着配置写出一个图来，其他类型的柱状图、散点图等也都很快能找到相关的配置