echarts 折线图悬停拐点大小不变_echarts-折线图（折线虚实/颜色与拐点样式修改）...
效果圖如下圖所示
1.繪制一個圖表時，需要有一個給定寬高的容器；基本配置可以閱讀echarts的文檔；里面有很多示例demo~~
html 結(jié)構(gòu)：
css樣式：
#box{
width: 600px;
height: 400px;
border: 1px solid #e4e4e4;
}
js:
1. 首先需要引入echarts.js 的文件；可從echarts官網(wǎng)中按需要進(jìn)行下載，鏈接：http://echarts.baidu.com/download.html
2. ?如下為js代碼；可以根據(jù)注釋來理解；
其中有幾個點(diǎn)也是通過查閱文檔與百度所得
，僅此記錄，方便以后查閱與完善。
(1). 設(shè)置折線的虛實(shí)，不同折線的顏色設(shè)定；
(2). 對折線的拐點(diǎn)樣式進(jìn)行修改設(shè)置(拐點(diǎn)大小；拐點(diǎn)背景顏色)；達(dá)到所求；
(3). 坐標(biāo)軸的樣式(顏色，旋轉(zhuǎn)-適用于內(nèi)容較多時的完整顯示，例如時間)。
// 獲取到這個DOM節(jié)點(diǎn)，然后初始化
var myChart = echarts.init(document.getElementById("box"));
var option = {
// 標(biāo)題
title: {
text: '折線圖堆疊'
},
tooltip: {
trigger: 'axis'
},
//圖例名
legend: {
data:['郵件營銷','郵件營銷1','視頻廣告','視頻廣告1']
},
grid: {
left: '3%', //圖表距邊框的距離
right: '4%',
bottom: '3%',
containLabel: true
},
//工具框，可以選擇
toolbox: {
feature: {
saveAsImage: {}
}
},
//x軸信息樣式
xAxis: {
type: 'category',
boundaryGap: false,
data: ['周一','周二','周三','周四','周五','周六','周日'],
//坐標(biāo)軸顏色
axisLine:{
lineStyle:{
color:'red'
}
},
//x軸文字旋轉(zhuǎn)
axisLabel:{
rotate:30,
interval:0
},
},
yAxis: {
type: 'value'
},
series: [
//虛線
{
name:'郵件營銷',
type:'line',
symbolSize:8, //拐點(diǎn)圓的大小
color:['red'], //折線條的顏色
data:[800, 300, 500, 800, 300, 600,500],
smooth:false, //關(guān)鍵點(diǎn)，為true是不支持虛線的，實(shí)線就用true
itemStyle:{
normal:{
lineStyle:{
width:2,
type:'dotted' //'dotted'虛線 'solid'實(shí)線
}
}
},
},
//實(shí)線
{
name:'郵件營銷1',
type:'line',
symbol:'circle',
symbolSize:8,
itemStyle:{
normal:{
color:'red',
borderColor:'red', //拐點(diǎn)邊框顏色
}
},
data:[220, 182, 191, 234, 290, 330, 310]
},
{
name:'視頻廣告',
type:'line',
stack: '總量',
symbolSize:8,
color:['orange'],
smooth:false, //關(guān)鍵點(diǎn)，為true是不支持虛線的，實(shí)線就用true
itemStyle:{
normal:{
lineStyle:{
width:2,
type:'dotted' //'dotted'虛線 'solid'實(shí)線
}
}
},
data:[150, 232, 201, 154, 190, 330, 410]
},
{
name:'視頻廣告1',
type:'line',
stack: '總量',
color:['orange'],
symbol:'circle',
symbolSize:8,
data:[320, 332, 301, 334, 390, 330, 320],
itemStyle:{
normal:{
color:'orange',
borderColor:'orange',
}
},
},
]
};
myChart.setOption(option);
總結(jié)
以上是生活随笔為你收集整理的echarts 折线图悬停拐点大小不变_echarts-折线图（折线虚实/颜色与拐点样式修改）...的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： wxwidgets mysql_Ubun
- 下一篇： mysql nosql sqlite_自