1.常規(guī)折線圖x,y軸顏色以及線條變虛線修改
WeChat4f546dda81f686999e2c2f3afbd9c688.png
用 Echart接收后臺(tái)數(shù)據(jù)顯示折線圖，UI 部分修改成如圖所示。一些配置選項(xiàng)有官方文檔可以查看，不過挨著找太累了。
let option = {
// title:{
// text: type == 1 ? nowName+'(自然增長表)' : nowName+'(增長速率表)',
// left: 'center',
// top:'5%',
// },
grid: {
left: '1%',
right: '6%',
bottom: '80px',
containLabel: true
},
backgroundColor: '#25242a',
color: 'rgb(103, 148, 220)',
// tooltip: {
// trigger: 'axis',
// axisPointer: {
// type: 'cross',
// animation: false,
// label: {
// backgroundColor: '#ccc',
// borderColor: '#aaa',
// borderWidth: 1,
// shadowBlur: 0,
// shadowOffsetX: 0,
// shadowOffsetY: 0,
// textStyle: {
// color: '#222'
// }
// }
// },
// formatter: function (params) {
// return `時(shí)間：${params[0].data.value[0]}<br />${type == 1 ? '增長量：' : '速率：'}${params[0].data.value[1]}`;
// }
// },
// dataZoom: {
// show: true,
// start : 0
// },
xAxis: {
axisLine:{
lineStyle:{
color:"#276ee9"
}
},
splitLine:{
show:false,
lineStyle:{ type: 'dashed' }
},
axisTick:{
show:false
},
type: 'time',
// name: '時(shí)間',
boundaryGap: false,
data: dataTime,
axisLabel:{
// interval: 0,
// rotate:-30,
align:'center',
margin: 20,
color:"#ffffff"
},
},
yAxis: {
type: 'value',
name: type == 1 ? '增長量' : '速率',
nameTextStyle:{
color:"#ffffff"
},
splitLine:{
show:true,
lineStyle:{ type: 'dotted' }
},
axisLabel:{ // 軸文字
textStyle:{
color:'#ffffff',
fontSize : 12,
},
formatter:function (params, ticket, callback) {
return checkText3(params);
},
color:'#ffffff',
},
},
series: [{
data: newData,
type: 'line',
areaStyle: {
normal: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0,
color: '#8ec6ad'
}, {
offset: 1,
color: '#ffe'
}])
}
},
}]
};
2. 折線圖帶dataZoom同時(shí)數(shù)據(jù)區(qū)域顏色漸變
WeChat68ecbd3f76610951795881acc9a90d7b.png
以及如上圖的折線圖下面一塊可縮放的是dataZoom組件，相關(guān)配置可以參照這篇文章，注釋很詳細(xì)。
參考文章：Echarts dataZoom，開發(fā)全解+完美注釋
下面是我在工作項(xiàng)目中改的如上圖的代碼。
let option = {
title:{
text: type == 1 ? nowName+'(自然增長表)' : (type == 2 ?nowName+'(增長速率表)':nowName+'(評(píng)論增長速率表)'),
left: 'center',
top:'5%',
textStyle:{
color:"#65abe7"
}
},
grid:{
bottom:'85px',
},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'cross',
animation: false,
label: {
backgroundColor: '#ccc',
borderColor: '#aaa',
borderWidth: 1,
shadowBlur: 0,
shadowOffsetX: 0,
shadowOffsetY: 0,
textStyle: {
color: '#65abe7'
}
}
},
formatter: function (params) {
return `時(shí)間：${params[0].data.value[0]}<br />${type == 1 ? '增長量：' : '速率：'}${params[0].data.value[1]}`;
}
},
dataZoom: {
show: true,
start : 0,
textStyle:"#65abe7",
backgroundColor:new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0,
color: '#2a6496'
}, {
offset: 1,
color: '#2e4456'
}]),
borderColor:"",
// fillerColor:new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
// offset: 0,
// color: '#2a6496'
// }, {
// offset: 1,
// color: '#2e4456'
// }]),
dataBackground:{ //數(shù)據(jù)陰影的樣式。
lineStyle:"red"
},
},
backgroundColor: 'rgba(128, 128, 128, 0.1)',//設(shè)置背景色canvas 畫布透明
color: 'rgb(0,123,255)',
xAxis: {
type: 'time',
name: '時(shí)間',
boundaryGap: false,
data: dataTime,
splitLine:{
show:false
},
axisLine:{
lineStyle:{
color:"#6ea8c2"
}
},
axisLabel:{
// rotate:-20,
interval:0,
// align:'center',
margin:14,
interval:0,
textStyle:{
color:'#65abe7'
},
}
},
yAxis: {
type: 'value',
name: type == 1 ? '增長量' : '速率',
nameTextStyle:{
color:"#65abe7"
},
axisLine:{
show:false
},
splitLine:{
lineStyle:{
color:"#26353a"
}
},
axisLabel:{
textStyle:{// 軸文字
color:'#65abe7',
fontSize : 12,
},
formatter:'{value}',
color:'#65abe7',
},
},
series: [{
data: newData,
type: 'line',
areaStyle: {
normal: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0,
color: '#2a6496'
}, {
offset: 1,
color: '#2e4456'
}])
}
},
}]
};
2.2 增加兩條圖表標(biāo)線
WeChatd07ef425ecb168f0f52e4a7c29225991.png
修改markLine，因?yàn)轫撁嬲{(diào)用了 3 次生成三個(gè)表，下面的 type 是區(qū)分第一個(gè)表增加兩條圖表標(biāo)線的。
series: [{
data: newData,
type: 'line',
areaStyle: {
normal: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0,
color: '#2a6496'
}, {
offset: 1,
color: '#2e4456'
}])
}
},
markLine: {
data: type == 1 ?([
{
symbol: 'circle',
label: {
normal: {
position: 'end',
formatter: '近三十天平均互動(dòng)量'
}
},
yAxis: avg_30
}, {
symbol: 'circle',
label: {
normal: {
position: 'start',
formatter: '近十五天平均互動(dòng)量'
}
},
yAxis: avg_15
}
]):""
}
}]
3.map 中國地圖修改顏色線條樣式
WeChat076b82544f561e70df2b23a11573d1cc.png
let option = {
title: {
text: `${titleText[0]}`,
subtext: `${titleText[1]}`,
x: 'center',
y: '26%',
itemGap: 20,
textStyle : {
color : '#ffffff',
fontSize : 32,
},
subtextStyle : {
color : '#ffffff',
fontSize : 16,
}
},
series: [
{
name:'投放視頻數(shù)',
type:'pie',
hoverAnimation:false,
radius: ['82%', '100%'],
avoidLabelOverlap: false,
label: {
normal: {
show: false,
position: 'center'
},
emphasis: {
show: false,
textStyle: {
fontSize: '30',
fontWeight: 'bold'
}
}
},
labelLine: {
normal: {
show: false
}
},
data:[
{value:parseInt(Math.random()*40), itemStyle:{color:'#2ae5f0'}},
{value:50, itemStyle:{color:'#0c98ba'}},
]
}
],
};
