项目总结之echarts 使用
项目上需要使用echarts,对于一个新手前端来说，差点要爆炸了，自身前端基础就不好，echarts就更是不熟了，硬生生的逼着要一周做完一个系统。这算是个小总结吧，以后万一用的上捏。
{ type: 'bar', itemStyle: { normal: { color: new echarts.graphic.LinearGradient( 1, 0, 0, 0, [ {offset: 0, color: 'green'}, {offset: 0.5, color: '#0055FF'}, {offset: 1, color: '#FF6600'} ] ) }, emphasis: { color: new echarts.graphic.LinearGradient( 0, 0, 0, 1, [ {offset: 0, color: '#2378f7'}, {offset: 0.7, color: '#2378f7'}, {offset: 1, color: '#83bff6'} ] ) } }, }
效果如图：
// 线性渐变，前四个参数分别是 x0, y0, x2, y2, (右下左上)范围从 0 - 1，相当于在图形包围盒中的百分比，如果 globalCoord 为 `true`，则该四个值是绝对的像素位置 color: { type: 'linear', x: 0, y: 0, x2: 0, y2: 1, colorStops: [{ offset: 0, color: 'red' // 0% 处的颜色 }, { offset: 1, color: 'blue' // 100% 处的颜色 }], global: false // 缺省为 false } // 径向渐变，前三个参数分别是圆心 x, y 和半径，取值同线性渐变 color: { type: 'radial', x: 0.5, y: 0.5, r: 0.5, colorStops: [{ offset: 0, color: 'red' // 0% 处的颜色 }, { offset: 1, color: 'blue' // 100% 处的颜色 }], global: false // 缺省为 false } // 纹理填充 color: { image: imageDom, // 支持为 HTMLImageElement, HTMLCanvasElement，不支持路径字符串 repeat: 'repeat' // 是否平铺, 可以是 'repeat-x', 'repeat-y', 'no-repeat' }
上代码：
option = { legend: { bottom: 0, left: "center", type: "scroll", show: true, data: ["黄岛滚筒", "天津波轮"] }, tooltip: {}, dataset: { source: [ ["product", "2012", "2013", "2014",], ["黄岛滚筒", 41.1, 30.4, 65.1], ["天津波轮", 86.5, 92.1, 85.7] ] }, series: [ { type: "pie", center: ["17%", "45%"], radius: ["60%", "30%"], label:{ show: false, }, labelLine: { show: false }, itemStyle: { color: function(params) { //自定义颜色 var colorList = ["#3770DA", "#FB7293"]; return colorList[params.dataIndex]; } } }, { type: "pie", center: ["50%", "45%"], radius: ["60%", "30%"], label:{ show: false, }, labelLine: { normal: { show: false } }, itemStyle: { color: function(params) { //自定义颜色 var colorList = ["#3770DA", "#FB7293"]; return colorList[params.dataIndex]; } }, encode: { itemName: "product", value: "2013" } }, { type: "pie", center: ["83%", "45%"], radius: ["60%", "30%"], label:{ show: false, }, labelLine: { normal: { show: false } }, itemStyle: { color: function(params) { //自定义颜色 var colorList = ["#3770DA", "#FB7293"]; return colorList[params.dataIndex]; } }, encode: { itemName: "product", value: "2014" } } ] }
一个环状图代码：
option = { legend: { bottom: 0, left: "center", type: "scroll", show: true, data: ["黄岛滚筒", "天津波轮"] }, tooltip: {}, graphic: [ { type: "text", left: "center", top: "center", style: { text: `总开动率\n 89% `, textAlign: "center", fill: "#000", width: 30, height: 30 } } ], dataset: { source: [ ["product", "2012", "2013", "2014", "2015", "2016", "2017"], ["黄岛滚筒", 41.1, 30.4, 65.1, 53.3, 83.8, 98.7], ["天津波轮", 86.5, 92.1, 85.7, 83.1, 73.4, 55.1] ] }, series: [ { type: "pie", center: ["50%", "45%"], radius: ["30%", "60%"], label:{ show: true, position: 'outside', formatter:function(params){ return `${params.percent}% ${params.name}` } }, labelLine: { normal: { show: true } }, itemStyle: { color: function(params) { //自定义颜色 var colorList = ["#3770DA", "#FB7293"]; return colorList[params.dataIndex]; } } } ] };
先看原型图：
var option = tooltip: { trigger: "axis" }, legend: { show: false }, grid: { top: "15%", left: "3%", right: "12%", bottom: "3%", containLabel: true }, color: ["#1A62E8"], calculable: true, xAxis: [ { type: "category", name: "时间", data: Array.apply(null, Array(24)).map(function(item, i) { return i + 1; }) } ], yAxis: [ { splitLine: { show: false }, type: "value", interval: 1000, name: "单位:台", splitArea: { show: true, areaStyle: { opacity: 0.3, color: [ // new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [ // { // offset: 0, // color: "#FFFFFF" // }, // { // offset: 1, // color: "#ff0500", // } // ]), // new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [ // { // offset: 0, // color: "#FFFFFF" // }, // { // offset: 1, // color: "#ff8400", // } // ]), // new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [ // { // offset: 0, // color: "#FFFFFF" // }, // { // offset: 1, // color: "#0fff01", // } // ]) { type: "linear", x: 0, y: 0, x2: 1, y2: 1, colorStops: [ { offset: 0, color: "#FFFFFF" // 0% 处的颜色 }, { offset: 1, color: "#ff0500" // 100% 处的颜色 } ], global: false // 缺省为 false }, { type: "linear", x: 0, y: 0, x2: 0, y2: 1, colorStops: [ { offset: 0, color: "#FFFFFF" // 0% 处的颜色 }, { offset: 1, color: "#0fff01" // 100% 处的颜色 } ], global: false // 缺省为 false }, { type: "linear", x: 0, y: 0, x2: 0, y2: 1, colorStops: [ { offset: 0, color: "#FFFFFF" // 0% 处的颜色 }, { offset: 1, color: "#ff8400" // 100% 处的颜色 } ], global: false // 缺省为 false }, ] } } } ], series: [ { name: "黄岛滚筒", type: "bar", stack: "总量", data: [ 122.0, 2234.9, 732.0, 2423.2, 2325.6, 762.7, 1335.6, 1262.2, 332.6, 220.0, 62.4, 33.3 ], markPoint: { // data: [ // { type: "max", name: "最大值" }, // { type: "min", name: "最小值" } // ] }, markLine: { data: [ { type: "average", name: "平均值", lineStyle: { color: "#ff8400" } }, { type: "min", name: "最小值", lineStyle: { color: "#ff0500" } }, { type: "max", name: "最大值", lineStyle: { color: "#0fff01" } } ], label: { formatter: "{b}\n{c}/h" } }, }, { name: "天津波轮", type: "bar", stack: "总量", data: [ 2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3 ], markPoint: { data: [] }, markLine: {} } ] };
效果就出来了。
折线图是面积渐变
项目中使用vue,所以加了loading，将echarts绑在vue的原型实例上。使用_this.$echarts就可以得到echarts实例。
<div ref="powerLineChart" style="height:220px;width: 100%;"></div> var _this = this; _this.myChart = _this.$echarts.init(_this.$refs.powerLineChart); _this.myChart.showLoading(); var option = { tooltip: { trigger: "axis" }, legend: { data: ["总耗电", "生产耗电", "办公耗电"], bottom:0, }, color: ["#FF6600", "#5256B9", "#53C7C7"], grid: { left: "3%", right: "4%", bottom: "13%", containLabel: true }, xAxis: { type: "category", boundaryGap: false, data: Array.from(new Array(24), (item, index) => index + 1) }, yAxis: { type: "value", name: "单位：度" }, series: [ { name: "总耗电", type: "line", symbol: "none", smooth: true, data: [ 120, 132, 101, 134, 90, 230, 210, 120, 132, 101, 134, 90, 230, 210, 90, 230, 210, 120, 132, 101, 134, 90 ], markPoint: { data: [ { type: "max", name: "最大值" } // {type: 'min', name: '最小值'} ] }, markLine: { data: [ { type: "average", name: "平均值", lineStyle: { color: "#FF6600" } }, { type: "min", name: "最小值", lineStyle: { color: "#FE3824" } }, { type: "max", name: "最大值", lineStyle: { color: "#07B211" } } ], label: { formatter: "{b}\n{c}/h" } }, itemStyle: { normal: { color: "#5256B9", shadowBlur: 8, shadowColor: "#25d5f0", borderColor: "#5256B9", borderWidth: 3, backgroundColor: "transparent" } }, areaStyle: { normal: { color: new _this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [ { offset: 0, color: "#5256B9" }, { offset: 1, color: "#FFFFFF" } ]) } } }, { name: "生产耗电", type: "line", symbol: "none", smooth: true, data: [ 220, 182, 191, 234, 290, 330, 310, 150, 232, 201, 154, 190, 330, 90, 230, 210, 120, 132, 101, 123, 32, 23 ], markPoint: { data: [ // {type: 'max', name: '最大值'}, // {type: 'min', name: '最小值'} ] }, markLine: { data: [ // {type: 'average', name: '平均值'} ] }, itemStyle: { normal: { color: "#FF6600", shadowBlur: 8, shadowColor: "#25d5f0", borderColor: "#FF6600", borderWidth: 3, backgroundColor: "transparent" } }, areaStyle: { normal: { color: new _this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [ { offset: 0, color: "#FF6600" }, { offset: 1, color: "#FFFFFF" } ]) } } }, { name: "办公耗电", type: "line", symbol: "none", smooth: true, data: [ 150, 232, 201, 154, 190, 330, 410, 120, 132, 101, 134, 90, 230, 210, 150, 232, 201, 154, 190, 330, 23, 12 ], markPoint: { data: [ // {type: 'max', name: '最大值'}, // {type: 'min', name: '最小值'} ] }, markLine: { data: [ // {type: 'average', name: '平均值'} ] }, itemStyle: { normal: { color: "#53C7C7", shadowBlur: 8, shadowColor: "#FFFFFF", borderColor: "#53C7C7", borderWidth: 3, backgroundColor: "transparent" } }, areaStyle: { normal: { color: new _this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [ { offset: 0, color: "#53C7C7" }, { offset: 1, color: "#FFFFFF" } ]) } } } ] }; _this.myChart.hideLoading(); _this.myChart.setOption(option, true); window.addEventListener("resize", function() { _this.myChart.resize(); });
效果图：
桑基图
直接上代码：可以直接使用，其实就是自己组装了一个data对象是 energylist数组 ，links 为组装好的data数组
var energy = { 水: "#0055FF", 电: "#FF6600", 气: "#9BCF58", 办公1: "#53C7C7", 办公2: "#53C7C7", 生产1: "#5256BA", 生产2: "#5256BA", 黄岛滚筒: "#3770DA", 天津波轮: "#FB7293" }; var tempData = [ { source: "电", target: "黄岛滚筒", value: 5 }, { source: "电", target: "黄岛滚筒", value: 3 }, { source: "水", target: "黄岛滚筒", value: 8 }, { source: "水", target: "黄岛滚筒", value: 3 }, { source: "气", target: "黄岛滚筒", value: 1 }, { source: "气", target: "黄岛滚筒", value: 2 }, { source: "气", target: "黄岛滚筒", value: 8 }, { source: "黄岛滚筒", target: "办公1", value: 10 }, { source: "黄岛滚筒", target: "生产1", value: 8 }, { source: "电", target: "天津波轮", value: 8 }, { source: "电", target: "天津波轮", value: 4 }, { source: "水", target: "天津波轮", value: 8 }, { source: "水", target: "天津波轮", value: 2 }, { source: "气", target: "天津波轮", value: 7 }, { source: "气", target: "天津波轮", value: 5 }, { source: "天津波轮", target: "办公2", value: 20 }, { source: "气", target: "生产2", value: 13 } ]; //数据 var data = []; var energylist = []; for (var key in energy) { energylist.push({ name: key, itemStyle: { color: energy[key] } }); } for (var i = 0; i < tempData.length; i++) { var color = new _this.$echarts.graphic.LinearGradient(0, 0, 1, 0, [ { offset: 0, color: energy[tempData[i].source] }, { offset: 1, color: energy[tempData[i].target] } ]); data.push({ source: tempData[i].source, target: tempData[i].target, value: tempData[i].value, lineStyle: { color: color } }); } var option = { title: { text: "", top: "top", left: "35%" }, tooltip: { trigger: "item", triggerOn: "mousemove" }, series: [ { type: "sankey", data: energylist, links: data, focusNodeAdjacency: "allEdges", itemStyle: { borderWidth: 1, color: "#1b6199", borderColor: "#fff" }, lineStyle: { curveness: 0.5, opaenergy: 0.5 } } ] };
效果图：
mounted() { var _this = this; _this.myChart = _this.$echarts.init(_this.$refs.voltageGauge); _this.myChart.showLoading(); var option = { tooltip: { formatter: "{a} <br/>{b} : {c}%" }, series: [ { name: "电压", type: "gauge", center: ["20%", "55%"], max: 220, startAngle: 180, endAngle: -0, center: ["27%", "50%"], // 默认全局居中 // radius: '35%', detail: { formatter: "{value}V" }, data: [{ value: 170, name: "V" }], axisLine: { show: true, lineStyle: { color: [ [ 1, new _this.$echarts.graphic.LinearGradient(0, 0, 1, 0, [ { offset: 0.7, color: "#0055FF" }, { offset: 0.1, color: "#01058A" } ]) ] ] } } }, { name: "电流", type: "gauge", center: ["20%", "55%"], max: 80, startAngle: 180, endAngle: -0, center: ["75%", "50%"], // 默认全局居中 // radius: '35%', detail: { formatter: "{value}A" }, data: [{ value: 36, name: "A" }], axisLine: { show: true, lineStyle: { color: [ [ 1, new _this.$echarts.graphic.LinearGradient(0, 0, 1, 0, [ { offset: 0.1, color: "#E7BCF3" }, { offset: 0.7, color: "#E062AE" } ]) ] ] } } } ] }; setInterval(function() { option.series[0].data[0].value = (Math.random() * 220).toFixed(2) - 0; option.series[1].data[0].value = (Math.random() * 88).toFixed(2) - 0; _this.myChart.setOption(option, true); }, 2000); _this.myChart.hideLoading(); _this.myChart.setOption(option, true); window.addEventListener("resize", function() { _this.myChart.resize(); }); }
效果图：
饼图：
option: { title: { text: '科目工时分布', top: '8%', left: 'center' }, tooltip: { trigger: 'item', formatter: '{b} : {d}% ，{c}' }, legend: { icon: 'circle', top: 'bottom', left: 'center', data: ['数据1'， '数据2'， '数据3'， '数据4'， '数据5'， '数据6'] }, series: [ { type: 'pie', label: { formatter: ' {b|{b}：}{c} {per|{d}%} ', backgroundColor: '#eee', borderColor: '#aaa', borderWidth: 1, borderRadius: 4, rich: { b: { color: '#999', fontSize: 14, lineHeight: 22 }, per: { color: '#eee', backgroundColor: '#334455', padding: [2, 4], borderRadius: 2 } } }, radius: '40%', center: ['50%', '50%'], data: [ {name: '数据1', value: 12}, {name: '数据2', value: 12}, {name: '数据3', value: 12}, {name: '数据4', value: 12}, {name: '数据5', value: 12}, ] } ] },
效果
问题：
tooltip 太大，超出所在区域，tooltip被遮挡
解决方案
方案一：
tooltip: {
...
confine: true,
appendToBody: true // 4.7.0版本支持
...
}
方案二
tooltip: {
...
position: function (pos, params, el, elRect, size) {
var obj = { top: 10 }
obj[['left', 'right'][+(pos[0] < size.viewSize[0] / 2)]] = 130
return obj
}
...
}
总结
感觉做渐变时就是想好要哪块区域渐变，然后将color的值设置为渐变的效果，就ok了，这里还绑定了resize，当浏览器窗口变小时，图表也在变小。不过图表设置变色真的好好看。
