vue echarts简单实现

 <div class="title">全球TOP10顶级域协议支持情况</div>
        <div class="top-content">
          <div>
            <div ref="barChart" style="width:100%; height:140px"></div>
          </div>
        </div>

created () {
    this.getTabel()
  },
  mounted () {
    this.$nextTick(() => {
      setTimeout(() => {
        this.getEcharts()
        this.getpieChart()
      })
    })
  },


method:{

    getpieChart () {
	//echarts实例化
      let myChart = this.$echarts.init(this.$refs.barChart);
      let colorList = ['#00ffff', '#00cfff', '#006ced', '#ffe000', '#ffa800', '#ff5b00', '#ff3000']
      globalTopDomainConfiguration()
        .then((res)=>{
          let dataList = res.data.result
          let yData = [];
          let machine = []
          let newArr = []
          let remarksArr = []
          for(let i=0;i<dataList.length;i++) {
            newArr.push(dataList[i].itemChange)
            remarksArr.push(dataList[i].remarks)
          }
          yData=[...new Set(newArr)]
          machine = [...new Set(remarksArr)];
          const xData = machine.slice();
          const rowData = [];
   
        const seriesData = dataList.map(function(item) {
            return [item.remarks, item.itemChange, item.itemName]
        })
		//echarts配置
          let option = {
            grid: {
                left: '0%',
                right: '0%',
                bottom: '15%',
                top: '-2%',
                containLabel: true
            },
            tooltip: {
                trigger: 'item',
                show:false,
                axisPointer: {
                    type: 'shadow'
                },
                // formatter: function(params) {
                //   console.log(params)
                //     var value = params.value
                //     var target = value[1]
                //     var status = value[2]
                //     return [target + ':' + status
                //     ].join('<br/>')
                // }
            },
            xAxis: {
                type: 'category',
                data: xData,
                position: 'top',
                axisLabel: {
                  show: true,
                  rotate:30,
                  textStyle: {
                    color: '#00c7ff',  //更改坐标轴文字颜色
                    fontSize: 10,    //更改坐标轴文字大小   
                  },     
                },
                axisTick: {
                  show: false
                },
                axisLine: {
                  show: false
                }
            },
            yAxis: {
              type: 'category',
              data: yData,
              axisLabel: {
                show: true,
                margin:15,
                textStyle: {
                  color: '#00c7ff',
                  fontSize: 10,
                },
              },
              axisTick: {
                show: false
              }
            },
            series: {
              type: 'heatmap',
              data: seriesData,
              itemStyle: {
                emphasis: {
                  shadowBlur: 10,
                  shadowColor: 'rgba(0, 0, 0, 0.5)'
                },
                borderWidth: 1,
                borderColor: '#fff',
              }
            },
            visualMap: {
              show: true,
              left: '30%',
              bottom: '-3%',
              textStyle: { //图例文字的样式
                color: '#fff',
                fontSize: 10
              },
              orient: 'horizontal',//vertical
              pieces: [{
                  gt: 1,
                  color: '#21e2ef',
                  label: '支持'
                },{
                  lt: 1,
                  color: '#28687f',
                  label: '不支持',
                }
              ]
            }
        };
		
        option && myChart.setOption(option);
		
        }).catch((err) => {
          console.log(err)
        })
    },


}