echarts設置多條折線圖-tft每日頭條

首页

/

每日頭條

/

生活

/

echarts設置多條折線圖

echarts設置多條折線圖

更新时间：2026-11-10 05:10:03

在寫前端頁面時，我們遇到改變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>

,

Comments

Welcome to tft每日頭條 comments! Please keep conversations courteous and on-topic. To fosterproductive and respectful conversations, you may see comments from our Community Managers.

Sign up to post

Show More Comments

相关案例

推荐阅读

六分鐘看懂機械波

六分鐘看懂機械波

往下看蜀黍說相信許多小夥伴們，開車都會遇到一個魔咒，那就是碰到一個紅燈之後，那就是一路紅燈……但細心的車友也會發現，有時候你碰到一個綠燈後，也會一路碰綠燈，這是為什麼呢？這其實并不是因為運氣好，而是你開車恰好維持了我們的“綠波速度”~這是一...

怎麼存放楊桃

怎麼存放楊桃

怎麼存放楊桃?常溫下：楊桃在常溫下，它會迅速的變軟、失水、腐爛，所以我們采摘下楊桃後，一定要及時的儲存，防止變壞，今天小編就來說說關于怎麼存放楊桃?下面更多詳細答案一起來看看吧!怎麼存放楊桃常溫下：楊桃在常溫下，它會迅速的變軟、失水、腐爛，...

年下養成純愛的小說

年下養成純愛的小說

第五十四章有問題找度娘從夜晨夕家裡出來南宮明便去了公司，坐在辦公桌前越想越煩，他到底是有多想不開等了一夜就為了去人家一大早上吃狗糧的。不過夜晨夕的話卻清晰的印在了他的腦海裡‘喜歡嗎？其實我也不太清楚，我隻知道他受到傷害我就會莫名的心疼和憤怒...

羅永浩抖音賣貨數據

羅永浩抖音賣貨數據

直播電商已經經曆了幾年時間的發展，而在這一發展過程中，渠道、流量、主播、商家等各個相關環節也在變化，比如原先對平台來說，主播和MCN機構可能是相對穩定的資源，但現在，主播們跨平台出現也已經成為可能，譬如近期就有“羅永浩将開啟淘寶直播首秀”的...

雷蛇發布時間表

雷蛇發布時間表

IT之家7月14日消息，今天，雷蛇宣布推出RazerStreamController雷蛇直播控制台，售價1999元。官方表示，這是一款用于直播和内容創作的一站式控制台，搭載了12個Switchblade觸屏按鍵，可以在按鍵上綁定無限的命令和...

巨石強森wwe狠起來連女人都打

巨石強森wwe狠起來連女人都打

巨石強森wwe狠起來連女人都打

吃火鍋要選擇什麼鍋

湖南株洲市發展怎麼樣人口有多少

可愛的小動物超級呆萌

醋對葉菜噴施好嗎

手機黑屏開不了機了怎麼辦

菊花可以用來祭拜嗎

農村母雞學公雞叫預示着什麼

哈雷最稀有的車

uzi複出新進展

安徽2022年985大學錄取分數線排名

神獸誰能找出來

猜你喜欢

關于

條款和條件隱私政策 Cookie 設置聯系我們

服務

登陸注冊

tft每日頭條美食生活職場母嬰時尚科技汽車

友情鏈接

Copyright 2023-2026 - www.tftnews.com All Rights Reserved