本文主要介绍了jQuery插件echarts设置折线图中折线线条颜色和折线点颜色的方法,结合实例形式分析了jQuery图表插件echarts设置折线图的相关操作技巧,需要的朋友可以参考下，希望能帮助到大家。

1、问题背景

设计一条折线图，但是图形中不用插件自带的颜色，需要自定义线条和折点的颜色

2、实现源码

(1)图形自分配颜色

echarts-设置折线图中折线线条颜色和折线点颜色

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-设置折线图中折线线条颜色和折线点颜色

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)折点自定义颜色

echarts-设置折线图中折线线条颜色和折线点颜色

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、实现结果

(1)图形自分配颜色

(2)线条自定义颜色

(3)折点自定义颜色

4、问题说明

(1)设置折线线条颜色lineStyle:{

color:'#00FF00'

}

(2)设置折线折点颜色itemStyle : {

normal : {

color:'#00FF00'

}

}

相关推荐：