項目總結之echarts 使用

時間 2020-07-11

標籤項目總結 echarts 使用简体版

原文原文鏈接

項目上須要使用echarts,對於一個新手前端來講，差點要爆炸了，自身前端基礎就很差，echarts就更是不熟了，硬生生的逼着要一週作完一個系統。這算是個小總結吧，之後萬一用的上捏。html

漸變使用

項目中的echarts圖，大多須要漸變，因此先了解一下漸變。echarts官方Demo裏面有個例子[https://echarts.baidu.com/examples/editor.html?c=bar-gradient],能夠在實例裏面瞭解一下。有個echarts.graphic.LinearGradient這個類。示例中代碼是這個樣子的：（如下代碼修改了一下）前端

{ 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'} ] ) } }, }

View Code

效果如圖：vue

echarts.graphic.LinearGradient中有五個參數，前四個參數分別表明變色的方位右下左上，0, 0, 0, 1,表明漸變色從正上方開始.1, 0, 0, 0,表明漸變色從右邊開始漸變。0 1 0 0表明從正下方向正上方漸變，具體能夠本身設置看下效果，第5個參數則是一個數組, 用於配置顏色的漸變過程. 每一項爲一個對象, 包含offset和color兩個參數. offset的範圍是0 ~ 1, 用於表示位置, color表示顏色. 數組

漸變還有另外一種寫法：瀏覽器

// 線性漸變，前四個參數分別是 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'
}

View Code

環形圖

在作環形圖時，發生了一個很智障的問題，如下會說明一下，先說明在作環形圖時，要一次性生產三個環形圖，以前項目中搭建的框架使用的時echarts4，在這個項目中使用的時echarts3的版本，結果使用dataset屬性時，沒有效果，當初覺得是本身代碼寫的有問題，弄了一小時，最後發現版本不對，啊~~~QAQ固然這是一個小插曲。app

上代碼：echarts

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" } } ] }

View Code

接下來就是智障的一個問題了，在series.radius設置["60%", "30%"],時，致使環狀圖的牽引線在裏面，而後這個問題困擾了好久，而後問了一個大佬，他說我這兩個值設置反了，心裏mmp，沒救了.框架

一個環狀圖代碼：dom

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]; } } } ] };

View Code

柱狀圖

先看原型圖：ide

這個須要背景漸變，這個時候漸變就派上用場了，一二三上代碼：

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: {} } ] };

View Code

效果就出來了。

折線圖

折線圖是面積漸變

項目中使用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(); });

View Code

效果圖：

桑基圖

直接上代碼：能夠直接使用，其實就是本身組裝了一個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 } } ] };

View Code

效果圖：

儀表盤

能夠設置刻度標籤和刻度樣式，設置漸變時也是同樣的，能夠有兩種方法，這裏使用了第一種。

 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(); }); }