vue echarts 折线图 饼图 地图

直接上代码：

1、在vue中main.js中引入echarts

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

2、折线图

    drawLine(id, data) {
      const ct = this.$echarts.init(document.getElementById(id))
      ct.setOption({
        xAxis: {
          type: 'category',
          boundaryGap: false
        },
        yAxis: {
          type: 'value',
          boundaryGap: [0, '30%']
        },
        visualMap: {
          type: 'piecewise',
          show: false,
          dimension: 0,
          seriesIndex: 0
        },
        series: [
          {
            type: 'line',
            smooth: 0.6,
            symbol: 'none',
            lineStyle: {
              color: 'red',
              width: 2
            },
            markLine: {
              symbol: ['none', 'none'],
              label: { show: false }
            },
            data: data    // [[], []]
          }
        ]
      })
    },

3、饼图

    drawPie(id, data) {
      const ct = this.$echarts.init(document.getElementById(id))
      window.onresize = ct.resize()
      ct.setOption({
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b}: {c} ({d}%)'
        },
        legend: {
          orient: 'vertical',
          left: 10
        },
        series: [
          {
            name: '人数(比例)',
            type: 'pie',
            center: ['50%', '50%'],
            radius: ['50%', '70%'],
            label: {
              show: false,
              position: 'center'
            },
            emphasis: {
              label: {
                show: true,
                fontSize: '30',
                fontWeight: 'bold'
              }
            },
            labelLine: {
              show: false
            },
            data: data,    // [{value: '', name: ''}, {}]
            itemStyle: {
              normal: {
                color: function(params) {
                  const colorList = ['#44BB44', '#CC3352']
                  return colorList[params.dataIndex]
                }
              }
            }
          }
        ]
      })
    },

4、地图

需要在vue中，引入china.js，参考路径：

    import '../../../node_modules/echarts/map/js/china.js'

    drawArea(id, data) {
      const ct = this.$echarts.init(document.getElementById(id))
      ct.setOption({ // 进行相关配置
        tooltip: {}, // 鼠标移到图里面的浮动提示框
        dataRange: {
          show: false,
          min: 0,
          max: 1000,
          text: ['High', 'Low'],
          realtime: true,
          calculable: true,
          color: ['orangered', 'yellow', 'lightskyblue']
        },
        geo: { // 这个是重点配置区
          map: 'china', // 表示中国地图
          roam: false,
          itemStyle: {
            normal: {
              borderColor: 'rgba(0, 0, 0, 0.2)'
            },
            emphasis: {
              areaColor: null,
              shadowOffsetX: 0,
              shadowOffsetY: 0,
              shadowBlur: 20,
              borderWidth: 0,
              shadowColor: 'rgba(0, 0, 0, 0.5)'
            }
          }
        },
        series: [{
          type: 'scatter',
          coordinateSystem: 'geo' // 对应上方配置
        },
        {
          name: '人数', // 浮动框的标题
          type: 'map',
          geoIndex: 0,
          data: data    // [{name: '山东', value: 22}, {}]  省份不是写全称，去掉省字
        }
        ]
      })
    }