echarts

echarts = document.getElementById('echarts')
// 初始化图表
let myChart = this.$echarts.init(echarts)
myChart.resize()
// 清空当前实例
myChart.clear()
// 销毁实例，销毁后实例无法再被使用
myChart.dispose()

this.autoHeight = document.documentElement.clientHeight
myChart.getDom().style.height = this.autoHeight - (this.autoHeight / 4) + 'px'
myChart.setOption(getChartOption())

// 切换图例会触发的事件
myChart.on('legendselectchanged', (params) ->
	// 重新渲染某些参数

图例基本用法

// 图例基本用法
legend: {
        orient: 'horizontal', 方向(水平/垂直)
        right: 10,
        top: 20,
        bottom: 20,
        data: data.legendData,
        icon: 'path://M7.424 476.672L301.312 778.24s205.312-204.288 425.984 0c3.072 1.024 291.84-301.568 291.84-301.568s-466.944-519.168-1011.712 0',(扇形矢量值)
        formatter: [
            '{test|{name}}'
        ].join('\n'),
        textStyle: {  设置图例样式(定宽,超出换行)
            rich: {
                test: {
                    width: 100,
                    color: '#c23531',
                    lineHeight: 10
                }
            }
        }
    }

贯穿x或y轴的一条线(取消网格线)

贯穿x或y轴的一条线(取消网格线)
splitLine: {
   show: false
},

取消显示坐标轴

取消显示坐标轴
axisLine: {
	show: false
},

取消坐标轴刻度线

取消坐标轴刻度线
axisTick: {
	show: false
}

x或y轴的label(取消显示坐标值)

x或y轴的label(取消显示坐标值)
axisLabel: {
	show: false
}

tooltip提示框

tooltip:
   trigger: 'item',(主要在散点图，饼图等无类目轴的图表中使用。)
   formatter: (params) ->
          name = (scope.channels.filter (item) -> params.name is item.channelId)[0]?.name or ''
          params.percent = params.percent or 0
          if Math.floor(params.value) is 0 then params.percent = 0
          "#{params.seriesName}<br/>
           #总量 :
           #{total}人 <br/>
           #{name} : #{Math.floor(params.value)}人<br/>
             #占比 : #{parseFloat(params.percent)}%
           "

tooltip: {
    trigger: 'axis',
     showContent: true,
     triggerOn: 'click',
     formatter: function (params) {
       let series = []
       if (params instanceof Array) {
         document.getElementById('name').innerHTML = params[0].name
         for (let key in params) {
           let serie = []
           if (showDiffValue !== '率' && showDiffValue !== '比') {
             if (params[key].value === undefined) {
               serie.value = 0
             } else {
               serie.value = Math.ceil(params[key].value)
             }
           } else {
             if (params[key].value === undefined) {
               serie.value = 0 + '%'
             } else {
               serie.value = (params[key].value * 100).toFixed(2) + '%'
             }
           }
           serie.seriesName = params[key].seriesName
           serie.color = params[key].color
           series.push(serie)
         }
         that.series = series
       } else {
         document.getElementById('name').innerHTML = params.name
         document.getElementById('color').style.backgroundColor = params.color
         document.getElementById('seriesName').innerHTML = params.seriesName
         if (showDiffValue !== '率' && showDiffValue !== '比') {
           document.getElementById('data').innerHTML = Math.ceil(params.value)
         } else {
           document.getElementById('data').innerHTML = (params.value * 100).toFixed(2) + '%'
         }
       }
     },
     axisPointer: {
       type: 'line',
       lineStyle: {
         color: '#37c3aa',
         width: 3 * dpr,
         opacity: 0.5
       },
       handle: {
         show: true,
         color: '#004E52'
       },
       triggerOn: 'click'
     },
     padding: 10 * dpr,
     textStyle: {
       fontSize: 14 * dpr
     }
   }