vue下使用echarts报表

    ECharts，一个使用 JavaScript 实现的开源可视化库，可以流畅的运行在 PC 和移动设备上，兼容当前绝大部分浏览器（IE8/9/10/11，Chrome，Firefox，Safari等），底层依赖矢量图形库 ZRender，提供直观，交互丰富，可高度个性化定制的数据可视化图表。

1、安装echarts模块

npm install echarts -S
或者使用淘宝的镜像
npm install -g cnpm --registry=https://registry.npm.taobao.org
cnpm install echarts -S

 

2、引入echarts

一、全模块引入

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

二、精准引入

import * as echarts from 'echarts/lib/echarts'
// 引入折线图。
import 'echarts/lib/chart/line'
// 引入提示框组件、标题组件、工具箱组件。
import 'echarts/lib/component/tooltip'
import 'echarts/lib/component/title'
import 'echarts/lib/component/toolbox'
import 'echarts/lib/component/legend'

3、封装初始化方法 

 折叠源码

<template>   <div style="height:100%">     <section class="layer" style="height:99%">       <div class="box" style="height:100%">         <div class="box-header">           <el-button v-no-more-click type="primary" style="float: right;" @click="queryApi">刷新</el-button>         </div>         <div class="box-body" style="height:95%;weight:100%">           <div ref="myChart" style="height:100%;weight:100%"/><!-- 报表展现位置  请用ref定义（ref="myChart" 如同div定义id） ,脚本使用this.$refs.myChart使用此div加载报表    -->         </div>       </div>     </section>   </div> </template>

 折叠源码

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115

echarts.init(this.$refs.myChart).setOption({   title: {     text: '全国MPI指数季度环比和季度同比指数'   },   //处理鼠标浮点 显示的指标及样式   tooltip: {     trigger: 'axis',     formatter: function(params) {       let value = params[0].name       let tlt = ''       if (value.substr(5, 1) === '1') {         tlt = value.substr(0, 4) + '年一季度'       }       if (value.substr(5, 1) === '2') {         tlt = value.substr(0, 4) + '年二季度'       }       if (value.substr(5, 1) === '3') {         tlt = value.substr(0, 4) + '年三季度'       }       if (value.substr(5, 1) === '4') {         tlt = value.substr(0, 4) + '年四季度'       }       var result = tlt + '<br>'       params.forEach(function(item) {         if (item.data !== null) {           result += '<span style="display:inline-block;margin-right:5px;border-radius:10px;width:9px;height:9px;background-color:' + item.color + '"></span>'           result += item.seriesName + ' : ' + '<span style="color:#e30101">' + item.data + '%</span><br>'         }       })       return result     },     extraCssText: 'z-index:4'   },   legend: {     data: ['同比增长率', '环比增长率']  //指标类型   },   grid: {     left: '3%',     right: '4%',     bottom: '3%',     containLabel: true   },   toolbox: {     feature: {       saveAsImage: {}     }   },   //双X轴   xAxis: [     {       type: 'category',       boundaryGap: true,       position: 'bottom',       data: this.yearM,//X轴对应的数组数据       axisLabel: {         interval: 0,         formatter: function(value, index) {           if (value.substr(5, 1) === '1') {             return '一季度'           }           if (value.substr(5, 1) === '2') {             return '二季度'           }           if (value.substr(5, 1) === '3') {             return '三季度'           }           if (value.substr(5, 1) === '4') {             return '四季度'           }         }       }     },     {       type: 'category',       position: 'bottom',       offset: 20,       data: this.yearM,       axisLine: {         show: false       },       axisTick: {         show: false       },       axisLabel: {         interval: 0,         formatter: function(value, index) {           return value.substr(0, 4) + '年'         }       }     }   ],  // 对应y坐标   yAxis: {     type: 'value',     axisLabel: {       formatter: '{value} %'     }   },   //对应折先数据   series: [     {       name: '同比增长率',//对应指标       type: 'line',       stack: '总量',       data: this.srs//指标数据     },     {       name: '环比增长率', //对应指标       type: 'line',       stack: '总量',       data: this.crs//指标数据     }     ] })

 

 本文以echarts折先图为例，其他类型图表大同小异就不赘述了。