echarts 学习一

前端项目用的vue，步骤

npm install echarts --save

mian.js

// 全局引入的方式
import Echarts from 'echarts'
Vue.prototype.$echarts = Echarts

// 按需引入
// 例： 引入折线图等组件
require('echarts/lib/chart/line')
require('echarts/lib/chart/bar')
require('echarts/lib/chart/radar')

以定义一个map组件为例

<template>
  <div class="map-box">
    <div id="echartMap" :style="{width: '100%', height: '100%'}"/>
  </div>
</template>
<script>
import { Promise } from 'q'
export default {
  name: 'MapChart',
  model: [],
  props: {
    mapData: { type: Object, default: () => ({}) }
  },
  data() {
    return {
      maxColor: 0,
      minColor: 0,
      city: {
        name: 'zhejiang',
        mapType: '浙江'
      }
    }
  },
  watch: {
    mapData() {
      this.$nextTick(() => {
        if (this.mapData) {
          this.drawMap()
        }
      })
    }
  },
  mounted() {
    this.drawMap()
  },
  methods: {
    // 数据格式处理
    formatData(obj) {
      const arr = []
      for (const i in obj) {
        const o = {}
        o.name = i
        o.value = obj[i]
        arr.push(o)
      }
      return arr
    },
    // 绘制省级地图
    drawMap() {
      const self = this
      Promise.all(import(`echarts/map/js/province/${self.city.name}`)) //如此按需求引入指定的省份的地图文件
      const chartMap = self.$echarts.init(document.getElementById('echartMap'))

      const temp_data = self.formatData(self.mapData)
      const mapType = self.city.mapType
      if (temp_data.length > 0) {
        self.maxColor = Math.max.apply(Math,
          temp_data.map(function(o) {
            return o.value
          })
        )
        self.minColor = Math.min.apply(Math,
          temp_data.map(function(o) {
            return o.value
          })
        )
      }
      const option = {
        backgroundColor: '',
        title: {
          text: '全省数据资源接入范围概况',
          textStyle: { color: '#47AA8E' },
          left: 'center'
        },
        tooltip: {
          trigger: 'item',
          formatter: '{b}：{c}个数据集'
        },
        visualMap: {
          min: self.minColor,
          max: self.maxColor,
          textStyle: { color: '#ffffff' },
          realtime: true,
          calculable: true,
          inRange: {
            color: ['lightgreen', 'yellow', 'purple', 'orangered']
          }
        },
        series: [
          {
            type: 'map',
            mapType: mapType,
            itemStyle: {
              normal: { label: { show: true }},
              emphasis: { label: { show: true }}
            },
            data: self.formatData(self.mapData)
          }
        ]
      }
      chartMap.setOption(option)
      window.addEventListener('resize', function() {
        chartMap.resize()
      })
    }
  }
}
</script>
<style scoped>
.map-box{
  width: 100%;
  height: 400px;
}
</style>