本文主要介紹了jQuery插件echarts設(shè)置折線圖中折線線條顏色和折線點(diǎn)顏色的方法,結(jié)合實(shí)例形式分析了jQuery圖表插件echarts設(shè)置折線圖的相關(guān)操作技巧,需要的朋友可以參考下，希望能幫助到大家。

1、問題背景

設(shè)計(jì)一條折線圖，但是圖形中不用插件自帶的顏色，需要自定義線條和折點(diǎn)的顏色

2、實(shí)現(xiàn)源碼

(1)圖形自分配顏色

echarts-設(shè)置折線圖中折線線條顏色和折線點(diǎn)顏色

body,html{

width: 99%;

height: 99%;

font-family: "微軟雅黑";

font-size: 12px;

}

#line{

width: 100%;

height: 100%;

}

$(function(){

var chart = document.getElementById('line');

var echart = echarts.init(chart);

var option = {

title: {

text: ''

},

tooltip: {

trigger: 'axis'

},

legend: {

data:['銷售量']

},

grid: {

left: '3%',

right: '4%',

bottom: '3%',

containLabel: true

},

toolbox: {

feature: {

saveAsImage: {}

}

},

xAxis: {

type: 'category',

boundaryGap: false,

data: ['周一','周二','周三','周四','周五','周六','周日']

},

yAxis: {

type: 'value'

},

series: [

{

name:'銷售量',

type:'line',

stack: '銷售量',

data:[220, 132, 601, 314, 890, 230, 510]

}

]

};

echart.setOption(option);

});

(2)線條自定義顏色

echarts-設(shè)置折線圖中折線線條顏色和折線點(diǎn)顏色

body,html{

width: 99%;

height: 99%;

font-family: "微軟雅黑";

font-size: 12px;

}

#line{

width: 100%;

height: 100%;

}

$(function(){

var chart = document.getElementById('line');

var echart = echarts.init(chart);

var option = {

title: {

text: ''

},

tooltip: {

trigger: 'axis'

},

legend: {

data:['銷售量']

},

grid: {

left: '3%',

right: '4%',

bottom: '3%',

containLabel: true

},

toolbox: {

feature: {

saveAsImage: {}

}

},

xAxis: {

type: 'category',

boundaryGap: false,

data: ['周一','周二','周三','周四','周五','周六','周日']

},

yAxis: {

type: 'value'

},

series: [

{

name:'銷售量',

type:'line',

stack: '銷售量',

itemStyle : {

normal : {

lineStyle:{

color:'#00FF00'

}

}

},

data:[220, 132, 601, 314, 890, 230, 510]

}

]

};

echart.setOption(option);

});

(3)折點(diǎn)自定義顏色

echarts-設(shè)置折線圖中折線線條顏色和折線點(diǎn)顏色

body,html{

width: 99%;

height: 99%;

font-family: "微軟雅黑";

font-size: 12px;

}

#line{

width: 100%;

height: 100%;

}

$(function(){

var chart = document.getElementById('line');

var echart = echarts.init(chart);

var option = {

title: {

text: ''

},

tooltip: {

trigger: 'axis'

},

legend: {

data:['銷售量']

},

grid: {

left: '3%',

right: '4%',

bottom: '3%',

containLabel: true

},

toolbox: {

feature: {

saveAsImage: {}

}

},

xAxis: {

type: 'category',

boundaryGap: false,

data: ['周一','周二','周三','周四','周五','周六','周日']

},

yAxis: {

type: 'value'

},

series: [

{

name:'銷售量',

type:'line',

stack: '銷售量',

itemStyle : {

normal : {

color:'#00FF00',

lineStyle:{

color:'#00FF00'

}

}

},

data:[220, 132, 601, 314, 890, 230, 510]

}

]

};

echart.setOption(option);

});

3、實(shí)現(xiàn)結(jié)果

(1)圖形自分配顏色

(2)線條自定義顏色

(3)折點(diǎn)自定義顏色

4、問題說明

(1)設(shè)置折線線條顏色lineStyle:{

color:'#00FF00'

}

(2)設(shè)置折線折點(diǎn)顏色itemStyle : {

normal : {

color:'#00FF00'

}

}

相關(guān)推薦：

總結(jié)

以上是生活随笔為你收集整理的echarts折线图背景线_echarts设置折线线条颜色和折线点颜色的实例的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。