1.常规折线图x,y轴颜色以及线条变虚线修改
WeChat4f546dda81f686999e2c2f3afbd9c688.png
用 Echart接收后台数据显示折线图，UI 部分修改成如图所示。一些配置选项有官方文档可以查看，不过挨着找太累了。
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 `时间：${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: '时间',
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同时数据区域颜色渐变
WeChat68ecbd3f76610951795881acc9a90d7b.png
以及如上图的折线图下面一块可缩放的是dataZoom组件，相关配置可以参照这篇文章，注释很详细。
参考文章：Echarts dataZoom，开发全解+完美注释
下面是我在工作项目中改的如上图的代码。
let option = {
title:{
text: type == 1 ? nowName+'(自然增长表)' : (type == 2 ?nowName+'(增长速率表)':nowName+'(评论增长速率表)'),
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 `时间：${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:{ //数据阴影的样式。
lineStyle:"red"
},
},
backgroundColor: 'rgba(128, 128, 128, 0.1)',//设置背景色canvas 画布透明
color: 'rgb(0,123,255)',
xAxis: {
type: 'time',
name: '时间',
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 增加两条图表标线
WeChatd07ef425ecb168f0f52e4a7c29225991.png
修改markLine，因为页面调用了 3 次生成三个表，下面的 type 是区分第一个表增加两条图表标线的。
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: '近三十天平均互动量'
}
},
yAxis: avg_30
}, {
symbol: 'circle',
label: {
normal: {
position: 'start',
formatter: '近十五天平均互动量'
}
},
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:'投放视频数',
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'}},
]
}
],
};
