echarts设置多条折线图(echarts折线图如何修改折线颜色)

在写前端页面时,我们遇到改变echarts折线颜色的需求。今天我给大家介绍下echarts折线图如何修改折线颜色。

echarts设置多条折线图(echarts折线图如何修改折线颜色)(1)

1、在编辑器里新建一个study.html,并在头部引入echarts插件(可以去官网下载)

echarts设置多条折线图(echarts折线图如何修改折线颜色)(2)

2、新建一个div,命名为test,并给div设置宽和高,用来生成折线图.

echarts设置多条折线图(echarts折线图如何修改折线颜色)(3)

3、在script标签内通过id获取到div,然后生成一个折线图。

echarts设置多条折线图(echarts折线图如何修改折线颜色)(4)

4、通过设置lineStyle下的color属性来改变折线图的折线颜色

echarts设置多条折线图(echarts折线图如何修改折线颜色)(5)

5、在浏览器中打开页面,发现折线图里的折线已经变成黄色

echarts设置多条折线图(echarts折线图如何修改折线颜色)(6)

6、贴一下代码,以供参考:

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title>echarts折线图如何修改折线颜色</title>

<script src="echarts.min.js"></script>

</head>

<body>

<div id="test" style="width: 600px;height: 600px;"></div>

</body>

<script>

let test = document.getElementById('test')

var echart = echarts.init(test)

let option = {

xAxis: {

type: 'category',

data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']

},

yAxis: {

type: 'value',

},

series: [{

data: [150, 230, 224, 218, 135, 147, 260],

type: 'line',

lineStyle:{

color:'yellow'

}

}]

};

echart.setOption(option, true)

</script>

</html>

,

免责声明:本文仅代表文章作者的个人观点,与本站无关。其原创性、真实性以及文中陈述文字和内容未经本站证实,对本文以及其中全部或者部分内容文字的真实性、完整性和原创性本站不作任何保证或承诺,请读者仅作参考,并自行核实相关内容。文章投诉邮箱:anhduc.ph@yahoo.com

    分享
    投诉
    首页