共计 3624 个字符，预计需要花费 10 分钟才能阅读完成。
echarts 是一款 js 组件库，能够绘制各种类型的图表数据，功能强大。官网文档 https://echarts.apache.org
上面总结下在 vue2 我的项目中的应用
1.npm 装置 echarts
npm install echarts --S
2. 引入 echarts 的全家桶，在 vue index.html 引入内部 js
| // 从 node_modules 中 copy echarts.min.js 到定义的 static_front 目录下 | |
| <script src="/static_front/module/echarts/echarts.min.js"></script> |
3. 在 webpack.base.conf 中配置内部组件插件
| // 在 externals 选项中配置 | |
| externals：{echarts：“echarts”} |
4. 在 main.js 中导入，并定义成全局属性
| import * as echarts from 'echarts' | |
| // 这两行特地留神：这是绘制中国热力求用，装置最新版 echarts5.3.0 后，并没有 map/json/china.json，我是从 v4.9.0 中复制来的 | |
| import china from '@static_front/module/echarts/china.json' | |
| echarts.registerMap('china', china) | |
| Vue.prototype.$echarts = echarts |
5. 在组件 chart.vue 中绘制图表
| // 定义接收图表的容器 | |
| <el-row class="div-graphic"> | |
| <div style="width:100%;height: 400px;" id="bar"> | |
| </div> | |
| </el-row> |
| // 定义 echarts 实例对象 | |
| this.barCharts = this.$echarts.init(document.getElementById("bar")) // 实例 | |
| this.barCharts.showLoading(this.chartsLoadingStyle) //loading 显示，定义款式 | |
| // 这里能够是 request 交互, 失去 option 须要的数据 | |
| this.barCharts.setOption(option) | |
| this.barCharts.hideLoading() // 暗藏 loading |
6. 上面看看各个图表的 option 配置
| // 柱状图 | |
| barOption = {color: ['#3398DB'], // 系列调色板, 色彩列表 | |
| title: { // 图形题目 | |
| text: title, | |
| textStyle:{fontSize:14}, | |
| left:25, // 组件离容器左侧的像素值 | |
| top:0, | |
| }, | |
| tooltip: { // 提醒 | |
| trigger: 'axis', // 触发类型 item 数据项触发 axis 坐标轴触发 | |
| axisPointer : {// 指示器配置项 | |
| type : 'shadow' //line 直线指示器 shadow 暗影指示器 | |
| } | |
| }, | |
| grid:{// 网格设置 | |
| //left: "9%", // 默认是 10% | |
| }, | |
| toolbox:{ // 工具箱 | |
| show: true, | |
| feature:{// 要显示的工具, 除了内置的工具外，还能够自定义 | |
| dataView: { // 数据视图 | |
| readOnly: true | |
| }, | |
| magicType: {// 类型切换 | |
| type: ["line", "bar"] | |
| }, | |
| restore: {}, // 还原 | |
| saveAsImage: {} // 保留为图片，默认 type=png} | |
| }, | |
| xAxis: { // x 轴 | |
| type: 'category', //category 类目轴 value：数字轴 time:time 轴 log: 对数轴 | |
| boundaryGap: true, //true 标签和数据都会在刻度线两头，false: 标签和数据都在刻度线上 | |
| data: category, // 类目轴 数据 | |
| splitLine:{show:false // 坐标轴在 grid 区域中的分隔线。默认是显示的}, | |
| axisLabel:{ // 类目轴标签的斜度和格式化 | |
| formatter:function(value){ | |
| let rst = value | |
| if(value.length >5){rst = value.substring(0,5) + "..." | |
| } | |
| return rst | |
| } | |
| }, | |
| }, | |
| yAxis: { // y 轴 | |
| type: 'value', | |
| axisLine:{//value 坐标轴轴线设置 | |
| show: true, | |
| }, | |
| axisTick:{ //value 坐标轴刻度设置 | |
| show:true | |
| } | |
| }, | |
| series: [{ // 系列 | |
| name : this.typeMapping[this.cond.event_type]+'量', // 系列名称，用于 tooltip, legend 时的显示 | |
| type : "bar", | |
| barWidth: 30, | |
| data : data | |
| }] | |
| } |
| // 饼图 | |
| pieOption = { | |
| title : { | |
| text: title, | |
| textStyle:{fontSize:14}, | |
| left:25, // 组件离容器左侧的像素值 | |
| top:0, | |
| }, | |
| tooltip: { | |
| trigger: 'item', | |
| formatter: function (params,ticket,callback) { | |
| var name = ''; | |
| for(var i = 0 ; i < params['name'].length;i++){name += params['name'][i]; | |
| if(i > 0 && i % 20 == 0){name += '<br />'} | |
| } | |
| return params['seriesName'] + '<br />' + name + ':' + params['value'] + '('+params['percent']+'%)' | |
| }, | |
| }, | |
| legend: { // 图例 | |
| orient: 'vertical', | |
| data: category, | |
| left:'62%', | |
| top:"10%", | |
| formatter:function(value){ | |
| var rs = value; | |
| if(value.length > 25){rs = value.substring(0,25) + '...' | |
| } | |
| return rs | |
| } | |
| }, | |
| series: [{ // 系列 | |
| name : this.typeMapping[this.cond.event_type] +'量', // 系列名称 | |
| type : "pie", | |
| top: '5%', | |
| radius : '50%', // 饼图的半径 | |
| center: ['35%', '50%'],// 中心点 距 x 轴，y 轴的间隔 | |
| data : data, | |
| minAngle : 1, // 最小扇形的大小，避免值是 0 的扇形看不成成果 | |
| label : {// 图形上的标签文字 | |
| show : true, | |
| formatter: function(param){var rs = param['name']; | |
| if(rs.length > 15){rs = rs.substring(0,14) + '...' | |
| } | |
| return rs | |
| }, | |
| }, | |
| }], | |
| } |
| // 热力求 | |
| mapOption = {color: ['#3398DB'], | |
| title : {text: this.typeMapping[this.cond.event_type] + '数据地区散布', | |
| textStyle:{fontSize:14}, | |
| left:25, // 组件离容器左侧的像素值 | |
| top:0, | |
| }, | |
| tooltip : {trigger: 'item'}, | |
| grid: { | |
| top: 0, | |
| bottom: 0 | |
| }, | |
| visualMap: { // 视觉映射组件，相当于 echarts4 中的 dataRange, 次要是对地图视觉上的成果设置，比方色彩，定义图元自身的视觉和指标系列的视觉 | |
| type: 'continuous', //continuous: 连续型 'piecewise'：分段型 | |
| left:'15%',// 图元离直坐标系左侧间隔 | |
| top:'60%', | |
| min: 0, // 图元最大最小值 | |
| max: max, | |
| text:['高','低'], | |
| calculable: true, // 是否显示拖曳用的手柄 | |
| realtime: false, // 拖曳过程中是否实时更新 | |
| inRange: { // 扭转图元的色彩和指标系列色彩 从 '#DDFDFE' 到 '#006EDD' 逐渐加深 | |
| color: ['#DDFDFE', '#006EDD'], | |
| //symbolSize: [60, 200] // 是图元大小 | |
| } | |
| //splitNumber:8 // 被分段的个数，在 type=piecewise 中无效，默认值是 5 | |
| }, | |
| series : [ | |
| {name: this.typeMapping[this.cond.event_type] + '数据地区散布', | |
| type: 'map', | |
| map: "china", | |
| //roam: 'scale', // 开启鼠标缩放 | |
| selectedMode : 'multiple', // 选中模式，示意是否反对多个选中 | |
| label:{show:true}, // 地图上的 label 是否显示 | |
| data: data, | |
| } | |
| ], | |
| //animation: false // 是否开启动画 | |
| } |
正文完
