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>

这里要去下载地图地图

测试下