echarts 简单使用操作总结

首先需要安装echarts：

npm install echarts --save

安装完之后为了方便不用在对应的组件引用我的做法是main.js全局注册，当然全局注册的话我全局引入了所有，这样会导致引入过多项目可能会卡顿，所以如果有需要的话也可以按需引入部分的图标：

import * as echarts from 'echarts'
Vue.prototype.$echarts = echarts

然后就是组件里面应用了：对应的位置调用封装的方法即可比如在接口请求完数据处理完：

 <div class="ring" ref="ringStatistical"> </div>//对应的盒子
  methods: {
   initResultsStatistics() { //对应的位置调用封装的方法即可
            this.statisticsChart = this.$echarts.init(this.$refs.statisticsChart)
            let option = {
                title: {
                    text: '' //对应的标题
                },
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'shadow'
                    }
                },
                legend: {
                    itemWidth: 10,
                    itemHeight: 10,
                    // show: true,
                    right: '0', //图例的位置
                    padding: [20, 0, 0, 0], //可设定图例[距上方距离，距右方距离，距下方距离，距左方距离]
                    textStyle: {
                        fontSize: 12,
                        color: '#B9E9E8',
                    },
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },
                xAxis: {
                    type: 'category',
                    boundaryGap: [0, 0.01],
                    data: this.orgNameList,
                    axisTick: {
                        show: false,  // 是否显示，默认为false
                    },
                    axisLine: {
                        lineStyle: {
                            show: true,  // 是否显示
                            color: '#09605B', // 坐标轴线线的颜色
                        }
                    }, // 坐标轴 轴线
                    axisLabel: {
                        rotate: -60,
                        formatter: function (value) { 坐标轴字数限制
                            if (value.length > 5) {
                                return `${value.slice(0, 5)}...`;
                            }
                            return value;
                        }
                    }
                },
                yAxis: {
                    type: 'value', 
                    data: [],
                    splitLine: {    // 网格线
                        show: false  // 是否显示，默认为false
                    },
                    axisLine: {    // 坐标轴 轴线
                        show: true,  // 是否显示
                        lineStyle: {
                            color: '#09605B',
                            width: 1,
                            type: 'solid',
                        }
                    },
                    axisTick: {
                        show: true  // 是否显示，默认为false
                    },
                },
                series: [ // 双柱显示
                    {
                        name: '照片',
                        type: 'bar', // 图表的类型 ‘line’折现图类型，‘pie’饼图类型
                        data: this.imgList, //处理好的对应的数据类型 
                        itemStyle: {    //柱状颜色和圆角
                            barBorderRadius: [5, 5, 0, 0], // （顺时针左上，右上，右下，左下）
                            color: new this.$echarts.graphic.LinearGradient(0, 1, 0, 0, [  //柱状图的颜色渐变
                                { offset: 0, color: 'rgba(0,154,252,0)' },
                                { offset: 0.5, color: 'rgba(0,154,252,0.7)' },
                                { offset: 1, color: '#188df0' }
                            ])
                        },
                    },
                    {
                        name: '视频',
                        type: 'bar',
                        data: this.VideoList,
                        itemStyle: {    //柱状颜色和圆角
                            barBorderRadius: [5, 5, 0, 0], // （顺时针左上，右上，右下，左下）
                            color: new this.$echarts.graphic.LinearGradient(0, 1, 0, 0, [
                                { offset: 0, color: 'rgba(241,189,49,0)' },
                                { offset: 0.5, color: 'rgba(241,189,49,0.7)' },
                                { offset: 1, color: '#F1BD31' }
                            ])
                        },
                    }
                ]
            }
            this.statisticsChart.setOption(option)
            window.addEventListener("resize", () => { //关键代码图表可以随着屏幕窗口的大小变化而自适应
                if (this.statisticsChart) {
                    this.statisticsChart.resize()
                }
            })
  }

具体很多的属性样式还需看官方文档，本文只是简单的基本使用。