vue 第五节

集成echars

BI类的信息一般都会用到图片统计表格，以前用过highcharts，不过听说百度的echars很不错支持的类型更多，api更友好。

首先安装依赖

cnpm install –save echarts -D

新建一个view echar.vue

具体数据参考文档

<template>
    <div>
        <el-col :span="12">
            <div id="map" style="width:100%; height:400px;"></div>
        </el-col>
        <el-col :span="12">
            <div id="chartPie" style="width:100%; height:400px;"></div>
        </el-col>
    </div>
</template>

<script>
import echarts from 'echarts'
import chinaJson from '../../static/data/china.json'
export default {
  name: 'echar',
  data () {
    return {
      map: null,
      pie: null
    }
  },
  mounted: function () {
    let _this = this
    echarts.registerMap('china', chinaJson)
    _this.map = echarts.init(document.getElementById('map'))
    _this.pie = echarts.init(document.getElementById('chartPie'))
    _this.map.setOption({
      title: {
        text: '中国地图',
        subtext: '测试下',
        x: 'center'
      },
      tooltip: {
        trigger: 'item',
        formatter: '{b}'
      },
      series: [
        {
          name: '中国',
          type: 'map',
          mapType: 'china',
          selectedMode: 'multiple',
          label: {
            normal: {
              show: true
            },
            emphasis: {
              show: true
            }
          },
          data: [
            {name: '湖南', selected: true}
          ]
        }
      ]
    })
    this.pie.setOption({
      title: {
        text: '程序猿',
        subtext: '我乱搞的',
        x: 'center'
      },
      tooltip: {
        trigger: 'item',
        formatter: '{a} <br/>{b} : {c} ({d}%)'
      },
      legend: {
        orient: 'vertical',
        left: 'left',
        data: ['死宅', '二次元', '游戏控', '爱妹纸', '爱美剧']
      },
      series: [
        {
          name: '程序员',
          type: 'pie',
          radius: '55%',
          center: ['50%', '60%'],
          data: [
            {value: 835, name: '游戏控'},
            {value: 410, name: '爱美剧'},
            {value: 274, name: '死宅'},
            {value: 135, name: '爱妹纸'},
            {value: 1048, name: '二次元'}
          ],
          itemStyle: {
            emphasis: {
              shadowBlur: 10,
              shadowOffsetX: 0,
              shadowColor: 'rgba(0, 0, 0, 0.5)'
            }
          }
        }
      ]
    })
  }
}
</script>

这里要去下载地图地图

测试下