最近做一個公衆号有需求是要添加一個圖表，自己調查了一下，決定使用ECharts，在vue項目中引入ECharts，由于第一次做圖表，還要跟UI設計圖保持一緻，也是遇到了好多樣式問題，在這裡做一下總結。
效果圖如下：
ECharts官方Docs
ECharts官方Example
ECharts附錄一按需引入ECharts圖表群組件
一.安裝插件
npm install echarts --save
二.在目前頁面中按需引入子產品
const echarts = require('echarts/lib/echarts');
// require('echarts/lib/chart/bar');
require('echarts/lib/chart/line');
require('echarts/lib/component/tooltip');
require('echarts/lib/component/markPoint');
require('echarts/lib/component/title');
require('echarts/lib/component/axisPointer');
三.在mounted()方法裡面加載該折線圖
mounted(){
this.drawLine();
}
methods: {
drawLine() {
const that = this;
this.myChat = echarts.init(document.getElementById('myChat'));
this.myChat.setOption({
tooltip: {
show: true,
trigger: 'axis',
axisPointer: {
type: 'line',
axis: 'auto',
lineStyle: {
color: '#F78600',
z: 0,
symbolSize: 2,
},
label: {
show: true,
color: '#F78600',
backgroundColor: '#FFFFFF',
formatter() {
return '';
},
},
},
borderColor: '#FFFFFF',
formatter(params) {
return `<div style="z-index: 10; height: 10px; line-height: 10px; text-align: center; font-size: 12px">${params[0].seriesName} ${params[0].value}%<div/>`;
},
backgroundColor: '#F78600',
showContent: true,
},
legend: {
data: ['平均溫度'],
},
grid: {
top: 35,
x2: 30,
y2: 10,
},
calculable: true, // 提示框消失
xAxis: {
position: 'top',
type: 'category',
data: ['-5歲', `${that.info.age}歲`, '+5歲', '+10歲', '+15歲', '+20歲', '+25歲'],
axisPointer: {
type: 'line',
snap: false,
label: {
color: '#F78600',
backgroundColor: '#FFFFFF',
shadowColor: '#FFFFFF',
formatter(params) {
return `${params.value}`;
},
},
lineStyle: {
type: 'solid',
},
triggerTooltip: true,
},
backgroundColor: '#F78600',
boundaryGap: false,
gridIndex: 0,
// 坐标軸刻度标簽的相關設定
axisLabel: {
color: '#9EA0AA',
fontSize: 10,
interval: 'auto',
},
// 坐标軸軸線相關設定
axisLine: {
show: false,
},
// 刻度線
axisTick: {
show: false,
alignWithLabel: true,
},
// 網格線
splitLine: {
show: true,
lineStyle: {
// width: 1,
type: 'dotted',
color: '#EEEEEE',
},
},
},
yAxis: [
{
show: false, // 是否顯示Y軸
scale: true, // 隻在數值軸中有效
// position: 'right', // 坐标軸顯示的位置
type: 'value',
name: '溫度',
min: that.dataArrMin - 10,
max: that.dataArrMax + 10,
interval: 1,
axisLabel: {
formatter: '{value}%',
},
},
],
series: [
{
name: '現在',
type: 'line',
stack: '總量',
smooth: true, // 曲線平滑true
// symbol: 'circle',
symbolSize: 4,
showSymbol: false,
hoverAnimation: false,
z: 20,
markPoint: {
z: 1000,
symbol: 'path://m 0,0 h 48 v 20 h -30 l -6,10 l -6,-10 h -6 z',
showSymbol: true,
itemStyle: {
color: '#939393',
opacity: 0.5,
width: 74,
height: 32.4,
borderRadius: 50,
z: 1000,
},
symbolSize: [25, 20], // 容器大小
symbolOffset: [0, -10], // 位置偏移
label: {
position: 'insideTop',
distance: 4,
offset: [0, -2],
color: '#ffffff',
fontSize: 10,
textBorderRadius: 10,
formatter(params) {
return `${params.value}%`;
},
},
data: [
{type: 'max', name: '最大值'},
{type: 'min', name: '最小值'},
],
},
itemStyle: {
normal: {
areaStyle: {
z: 10,
type: 'default',
// 漸變色實作
color: new echarts.graphic.LinearGradient(0, 0, 0, 1,
// 變化度
// 三種由深及淺的顔色
[{
offset: 0,
color: '#FFE8BF',
},
// {
// offset: 0.5,
// color: '#FFFFFF',
// },
{
offset: 1,
color: '#FFFFFF',
}]),
},
lineStyle: { // 線的顔色
width: 1,
type: 'solid',
color: '#F78600',
},
label: {
show: false,
position: 'top',
textStyle: {
color: '#F78600',
},
},
color: '#FFFFFF',
borderColor: '#F78600',
borderWidth: 1,
},
},
areaStyle: {
},
data: that.dataArr,
},
],
});
window.addEventListener('resize', this.myChat.resize);
this.myChat.dispatchAction({
type: 'showTip',
seriesIndex: 0,
dataIndex: 1,
z: 0,
});
},
}
四.圖表的一些樣式問題
(1)ECharts X軸固定在上方
xAxis: {
position: 'top',
}
(2)ECharts line動态重新整理資料
data: 動态接口資料
(3)ECharts tooltip提示框
tooltip ={ //提示框元件
trigger: 'item', //觸發類型,'item'資料項圖形觸發，主要在散點圖，餅圖等無類目軸的圖表中使用。 'axis'坐标軸觸發，主要在柱狀圖，折線圖等會使用類目軸的圖表中使用。
triggerOn:"mousemove", //提示框觸發的條件,'mousemove'滑鼠移動時觸發。'click'滑鼠點選時觸發。'mousemove|click'同時滑鼠移動和點選時觸發。'none'不在 'mousemove' 或 'click' 時觸發
showContent:true, //是否顯示提示框浮層
alwaysShowContent:true, //是否永遠顯示提示框内容
showDelay:0, //浮層顯示的延遲，機關為 ms
hideDelay:100, //浮層隐藏的延遲，機關為 ms
enterable:false, //滑鼠是否可進入提示框浮層中
confine:false, //是否将 tooltip 框限制在圖表的區域内
transitionDuration:0.4, //提示框浮層的移動動畫過渡時間，機關是 s,設定為 0 的時候會緊跟着滑鼠移動
position:['50%', '50%'], //提示框浮層的位置，預設不設定時位置會跟随滑鼠的位置,[10, 10],回掉函數，inside滑鼠所在圖形的内部中心位置，top、left、bottom、right滑鼠所在圖形上側，左側，下側，右側，
formatter:"{b0}: {c0}<br />{b1}: {c1}", //提示框浮層内容格式器，支援字元串模闆和回調函數兩種形式,模闆變量有 {a}, {b}，{c}，{d}，{e}，分别表示系列名，資料名，資料值等
backgroundColor:"transparent", //标題背景色
borderColor:"#ccc", //邊框顔色
borderWidth:0, //邊框線寬
padding:5, //圖例内邊距，機關px 5 [5, 10] [5,10,5,10]
textStyle:mytextStyle, //文本樣式
};
(4)ECharts 初始化的時候顯示tooltip提示框
window.addEventListener('resize', this.myChat.resize);
this.myChat.dispatchAction({
type: 'showTip',
seriesIndex: 0,
dataIndex: 1,
z: 0,
});
(5)圖表高度調整
動态擷取的資料，如果數組高度不一樣，就會導緻圖表的高度不一緻，怎麼調整呢？
//直角坐标系内繪圖網格
grid : {
left : '3%', //元件離容器左側的距離
right : '4%',
bottom : '0%',
containLabel : true //grid 區域是否包含坐标軸的刻度标簽
},
(6) tooltip提示框 自定義小圓點(顔色，形狀和大小等等),同理，要改變小圓點兒形狀，重寫html片段即可。
formatter: function(params) {
var result = ''
var dotHtml = '<span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:#1197b8"></span>'
params.forEach(function (item) {
result += item.axisValue + "</br>" + dotHtml + item.data
})
return result
}
(7)ECharts 折線圖美化(顔色漸變，背景透明，隐藏坐标軸)
參考：https://blog.csdn.net/Changeable0127/article/details/81333559
(8)ECharts 折線圖折線平滑以及實作填充背景色漸變
參考：https://blog.csdn.net/u012998306/article/details/88689370
(9)ECharts 柱狀圖或者折線圖頂端顯示資料
在series如果已經有itemStyle就在她裡面添加position: 'top'
series : [ {
name : '',
type : 'bar',
barWidth : '50%',
itemStyle : {
normal : {
label: {
show: true,
position: 'top',
textStyle: {
color: 'white'
}
}
},
},
data : seriesDataArray
} ]
(10)實作折線圖的拐點為空心圓圈
我們看官網提供的是拐點處都是實心的圓，而且圓内部填充的顔色與legend顔色一緻，隻要把圓的背景顔色填充成背景色，圓圈的border跟折線的顔色一緻
series[{
symbol: 'circle',
itemStyle: {
normal: {
color: "#000",
borderColor: '#f58f23',
borderWidth: 1,
}
},
}]
(11)修改折線的顔色和折線的點的大小的方法
series: [{
type: 'line',
showSymbol: true,
symbol: 'circle', //設定為實心點
symbolSize: 20, //設定實心點的大小
hoverAnimation: false,
animation: false,
data: dataa,
markPoint: { //顯示一定區域内的最大值和最小值
data: [
{ type: 'max', name: '最大值' },
{ type: 'min', name: '最小值' }
]
}]
(12)ECharts折線圖取消折線上圓點，設定線條為虛線，series-->symbol:'none'取消折線上的圓點
series: [{
itemStyle:{
normal:{
lineStyle:{
width:2,
type:'dotted' //設定線條為虛線
}
}
},
data: data,
type: 'line'
}]
(13)ECharts markPoint顯示問題
參考：https://blog.csdn.net/m0_38069630/article/details/80921801
(14)markPoint氣泡大小及修改氣泡中字型顔色
markPoint : {
// symbolSize: 80,控制氣泡大小
itemStyle:{
normal:{
label:{
show: true,
color: '#000000',//氣泡中字型顔色
}
}
},
data : [
{type : 'max', name: '最大值'},
{type : 'min', name: '最小值'}
]
}
(15)關于移動端如何實作ECharts折線圖預設展示高亮資料點的解決辦法
參考：https://my.oschina.net/u/3983353/blog/2218887
![vue項目：npm打包-S和-D差別：[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)