在vue中echarts简单使用

安装

npm i echarts -S

使用

 import echarts from "echarts";
 
 this.xharts = echarts.init(document.getElementById('main'))
 this.xharts.setOption(option)

echarts显示工具栏实现下载、柱状图、折线图切换功能

toolbox: {
    show: true, //是否显示工具栏组件
    orient: "horizontal", //工具栏icon的布局朝向
    itemSize: 18, //工具栏icon的大小
    itemGap: 20, //item之间的间距
    right: 20, //toolbox的定位位置
    feature: {
        saveAsImage: { show: true }, //导出图片
        magicType: {
            //动态类型切换
            type: ["line", "bar", "pie"]
        },
        restore: { show: true } //重置
    },
    iconStyle: {
        // color:'#04a0bb'
    }
}

饼图配置

initCharts(option) {
      if (this.isEmpty(option)) {
        option = {}
        option.data = [
          {value: 335, name: 'A'},
          {value: 310, name: 'B'},
          {value: 274, name: 'C'}
        ].sort(function (a, b) {
          return a.value - b.value;
        })
      }

      let myCakeCharts = echarts.init(document.getElementById(this.id));
      var tempOption = {
        title: {
          text: 'Customized Pie',
          left: 'center',
          top: 20,
          textStyle: {
            color: '#ccc'
          }
        },
        tooltip: {
          trigger: 'item',
        },
        grid: {
          top: '180px',
          left: '50px',
          right: '15px',
          bottom: '0px'
        },
        color: colorsList;
        , series: [
          {
            name: option.name ? option.name : '占比',
            type: 'pie',
            radius: '90%',
            minAngle: 15,//最小角度
            startAngle: option.startAngle?option.startAngle: 110, //起始角度
            avoidLabelOverlap: true,
            center: ['50%', '50%'],
            labelLine: {
              lineStyle: {
                color: 'black'
              },
              smooth: 0.2,
              length: 10,
              length2: 10,
            },
            itemStyle: {
              color: function (colors) {
                return colorList[colors.dataIndex];
              },
            },
            animationType: 'scale',
            animationEasing: 'elasticOut',
            animationDelay: function (idx) {
              return Math.random() * 200;
            }
          }
        ]
      }
      if (this.isRadius) {
      	//玫瑰饼 不设默认饼
        tempOption.series[0].roseType = 'radius'
      }
      if (option.legend) {
      //顶部的块
        tempOption.legend = option.legend
      }
      myCakeCharts.setOption(tempOption)
    }

圆环

initCharts(option) {
      if (this.isEmpty(option)) {
        option = {}
        option.data = [
          {name:'区域1',value:120},
          {name:'区域2',value:200}
        ]
      }
      let myCakeCharts = echarts.init(document.getElementById(this.id));
      var tempOption = {
        tooltip: {
          trigger: 'item',
          formatter:function (params) {
            return params.name + ':'+params.percent +"%"
          }
        },
        legend: {
          show:this.showLegend,
          top: 'middle',
          orient: 'vertical',
          left: 'right'
        },
        color:colorsList,
        grid: {
          left: 0,
          // right: 0,
          bottom: 0,
          top: 0,
          containLabel: true
        },
        series: [
          {
          	//鼠标移入事件
            silent:this.showSilent,
            type: 'pie',
            radius: ['40%', '70%'],
            avoidLabelOverlap: true,
            label: {
              normal: {
                show: this.showLineLabel,
                formatter:function (params) {
                  return params.name +params.percent +"%"
                },
                textStyle: {
                  fontSize: 13,
                },
                position: 'outside'
              },
              emphasis: {
                show: true
              }
            },
            labelLine: {
              normal: {
                show: this.showLineLabel,
                length: 10,
                length2: 10,
              },
              emphasis: {
                show: true
              }
            },
            data: option.data
          }
        ]
      }
      if (option.radius!==undefined){
      	//设置环的宽度
        tempOption.series[0].radius = option.radius
      }
      if (option.chartsCenter!==undefined){
      //设置位置
        tempOption.series[0].center = option.chartsCenter
      }
      if (option.title!==undefined){
        tempOption.title = option.title
      }
      // console.log(tempOption)
      myCakeCharts.setOption(tempOption)
    }

横向柱状图

initCharts(options) {
      if (this.isEmpty(options)) {
        options = {}
        options.labels = ['A', 'B', 'C', 'D', 'E']
        options.values = [150, 230, 224, 218, 135]
      }

      var color =  [
        '#5470c6',
        '#91cc75',
        '#fac858',
        '#ee6666',
        '#73c0de',
        '#3ba272',
        '#fc8452',
        '#9a60b4',
        '#ea7ccc',
      ]
      let myCakeCharts = echarts.init(document.getElementById(this.id));

      var tempOption = {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: {
          show: false,
        },
        color:color,
        barWidth:"50%",
        yAxis: {
          type: 'category',
          inverse: options.inverse?options.inverse:false,//倒序
          data: options.labels,
          splitLine: {
            show: false,
          },
          axisLine: {
            show: false
          },
          axisTick: {
            show: false
          }
        },
        series: [
          {
            name: options.name?options.name:'默认',
            type: 'bar',
            barWidth:'30%',
            data: options.values,
            center:["50%","50%"],
            label:{
              show:false,
              position:'insideRight',
              offset:[30,0]
            },
            itemStyle: {
              // shadowBlur: 200,
              // shadowColor: 'rgba(0, 0, 0, 0.5)',
              barBorderRadius: [20],
              color: function (colors) {
                return colorList[colors.dataIndex];
              },
            },
          },
        ]
      }
      myCakeCharts.setOption(tempOption)
    }

折线图

initCharts(optionData) {
      if (this.isEmpty(optionData)) {
        optionData = {}
        optionData.labels = ['xxx公司', 'xxxx公司', 'xxxxx公司', 'xxxxxx公司']
        optionData.values = [150, 230, 224, 218]
      }
      this.myCakeCharts = echarts.init(document.getElementById(this.id));
      var tempOption = {
        tooltip: {
          trigger: 'axis',
          // formatter:function (f,i) {
          //   console.log(f,i)
          // }
        },
        xAxis: {
          name: optionData.unitX ? optionData.unitX : 'nn',
          type: 'category',
          data: optionData.labels,
          boundaryGap: false,
          axisLabel: {
            interval: 0,  //设置这里
            rotate: optionData.rotate ? optionData.rotate : 0
          }
        },
        yAxis: {
          name: optionData.unitY ? optionData.unitY : 'mm',
          type: 'value'
        },
        color: colors,
        series: [
          {
            name: optionData.seriesName ? optionData.seriesName : '-',
            data: optionData.values,
            type: 'line',
            //是否平滑曲线
            smooth: this.isSmooth
          }
        ]
      }
	  //区域渐变色实现
      if (this.isFullColor) {
        // tempOption.xAxis.boundaryGap = false
        tempOption.series[0].areaStyle = {
          normal: {
            color: new echarts.graphic.LinearGradient(
              0, 0, 0, 1,
              [
                {offset: 0, color: 'rgba(104,104,230,1)'},//区域渐变色
                {offset: 1, color: 'rgba(104,104,230,0.00)'},
              ]
            ) //改变区域颜色
          }
        }
      }
      if (this.showLegend) {
        if (optionData.legend){
          tempOption.legend = optionData.legend
        }else {
          tempOption.legend = {}
        }
      }
      if (this.showMaxMin){
        tempOption.series[0]. markPoint =  {
          data: [
            {type: 'max', name: '最大值'},
            {type: 'min', name: '最小值'}
          ]
        }
      }

      if (!this.isEmpty(optionData.series)) {
        tempOption.series = optionData.series
      }
      this.myCakeCharts.setOption(tempOption)
    }

一些配置项

silent:true, 禁止所有鼠标悬停 划入事件  false为开启 true为关闭
selectedMode:false  禁止 legend的点击事件
yAxis ===> scale:1.5 配置y轴刻度最大值倍数
yAxis：{
	nameTextStyle:{//y轴上方单位的颜色
	  color:'#fff'  
	},
}

动态鼠标悬浮效果

var currentIndex = -1;
setInterval(() => {
  var dataLen = tempOption.xAxis.data.length;
  this.myCakeCharts.dispatchAction({
    type: 'downplay',
    seriesIndex: 0,
    dataIndex: currentIndex
  });
  currentIndex = (currentIndex + 1) % dataLen;
  this.myCakeCharts.dispatchAction({
    type: 'highlight',
    seriesIndex: 0,
    dataIndex: currentIndex,
  });
  this.myCakeCharts.dispatchAction({
    type: 'showTip',
    seriesIndex: 0,
    dataIndex: currentIndex
  });
  // console.log(currentIndex)
}, 3000)