關于【echarts折線顏色】，echarts設置多條折線圖，今天向乾小編給您分享一下，如果對您有所幫助別忘了關注本站哦。

1、echarts折線顏色：分享7個常用的echarts示例

1、對于位置不夠顯示的坐標值，使用斜顯示；

“xAxis>axisLabel>rotate”設置傾斜角度；

xAxis: { type: 'category', axisLabel: { color: '#b8e8fd', interval: 0, rotate: 30 }, axisLine: { lineStyle: { color: '#8dc1d8' } }, axisTick: { show: false }, data: totalValueData.xData}

2、對于坐標值比較長的名稱，使用換行顯示；

“xAxis>axisLabel>formatter”設置換行格式；

formatter: function(params) { var newParamsName = ""; // 最終拼接成的字符串 var paramsNameNumber = params.length; // 實際標簽的個數 var provideNumber = 4; // 每行能顯示的字的個數 var rowNumber = Math.ceil(paramsNameNumber / provideNumber); // 換行的話，需要顯示幾行，向上取整 /** * 判斷標簽的個數是否大于規定的個數， 如果大于，則進行換行處理 如果不大于，即等于或小于，就返回原標簽 */ // 條件等同于rowNumber>1 if (paramsNameNumber > provideNumber) { /** 循環每一行,p表示行 */ for (var p = 0; p < rowNumber; p++) { var tempStr = ""; // 表示每一次截取的字符串 var start = p * provideNumber; // 開始截取的位置 var end = start + provideNumber; // 結束截取的位置 // 此處特殊處理最后一行的索引值 if (p == rowNumber - 1) { // 最后一次不換行 tempStr = params.substring(start, paramsNameNumber); } else { // 每一次拼接字符串并換行 tempStr = params.substring(start, end) + "\n"; } newParamsName += tempStr; // 最終拼成的字符串 } } else { // 將舊標簽的值賦給新標簽 newParamsName = params; } //將最終的字符串返回 return newParamsName}

3、對于坐標值超長的名稱，使用省略號+移上去顯示；

“xAxis>axisLabel>formatter”設置省略號格式；

增加“tooltip”，移上去顯示詳細內容；

formatter: function(params) { var newParamsName = ""; // 最終拼接成的字符串 params = params.length <= 6 ? params : params.substring(0, 4) + '...'; var paramsNameNumber = params.length; // 實際標簽的個數 var provideNumber = 7; // 每行能顯示的字的個數 var rowNumber = Math.ceil(paramsNameNumber / provideNumber); // 換行的話，需要顯示幾行，向上取整 /** * 判斷標簽的個數是否大于規定的個數， 如果大于，則進行換行處理 如果不大于，即等于或小于，就返回原標簽 */ // 條件等同于rowNumber>1 if (paramsNameNumber > provideNumber) { /** 循環每一行,p表示行 */ for (var p = 0; p < rowNumber; p++) { var tempStr = ""; // 表示每一次截取的字符串 var start = p * provideNumber; // 開始截取的位置 var end = start + provideNumber; // 結束截取的位置 // 此處特殊處理最后一行的索引值 if (p == rowNumber - 1) { // 最后一次不換行 tempStr = params.substring(start, paramsNameNumber); } else { // 每一次拼接字符串并換行 tempStr = params.substring(start, end) + "\n"; } newParamsName += tempStr; // 最終拼成的字符串 } } else { // 將舊標簽的值賦給新標簽 newParamsName = params; } //將最終的字符串返回 return newParamsName}

tooltip: { trigger: 'axis', axisPointer: { // 坐標軸指示器，坐標軸觸發有效 type: 'line' // 默認為直線，可選為：'line' | 'shadow' }}

4、修改折線圖區域的漸變色；

“series>areaStyle”設置漸變色的數據；

areaStyle: { normal: { color: new echarts.graphic.LinearGradient( 0, 0, 0, 1, [{ offset: 0, color: 'rgba(21, 144, 229, 1)' }, { offset: 1, color: 'rgba(21, 144, 229, 0.1)' } ], false ), shadowColor: 'rgba(21, 144, 229, 0.1)', shadowBlur: 10 }}

5、餅圖中間增加顯示的內容；

“title”設置內容、位置和顏色等；

title: [{ text: '合計總數', x: '29%', top: '42%', textStyle: { color: '#5bb9fc', fontSize: size_obj.s12 }}, { text: totalValue, x: '30%', top: '50%', textStyle: { fontSize: size_obj.s14, color: '#fff' },}]

6、實現三色儀表盤；

全代碼如下；

var chartDom01 = document.getElementById('gauge-1');var myChart01 = echarts.init(chartDom01);var option01;option01 = { title: { text: '溶解氧(mg/L)', textStyle: { color: '#b8e8fd', fontSize: 12, fontWeight: 'normal' }, top: 18 }, series: [{ type: 'gauge', splitNumber: 1, radius: '93%', center: ["50%", "52%"], startAngle: 180, endAngle: 0, min: 0, max: 50, pointer: { show: true, width: 7, length: "60%", borderColor: '#000', borderWidth: '10', }, axisLine: { show: true, lineStyle: { width: 36, color: [ [0, 'transparent'], [0.333333, '#ffb345'], [0.343333, 'transparent'], [0.666666, '#19aced'], [0.676666, 'transparent'], [1, '#fa7383'] ], borderColor: '#000', borderWidth: '10', }, }, axisLabel: { show: true, color: "#fff", fontSize: 12, distance: -14, padding: [30, 0, 0, 0], // formatter: function(value) { // return value.toFixed(0); // }, }, //刻度標簽。 axisTick: { show: false, }, //刻度樣式 splitLine: { show: false, length: "28%", lineStyle: { color: "#fff", width: 2, }, }, //分隔線樣式 detail: { show: true, formatter: ['{a|溶解氧}', '{value}'].join('\n'), fontSize: 20, color: '#15cd96', width: '100%', height: '-320%', padding: [-300, 0, 0, 0], rich: { a: { color: '#fff', fontSize: 12, padding: [10, 0, 10, 0], } } }, title: { show: false }, data: [{ value: 2.77 }] // data: DOData }]};myChart01.clear();option01 && myChart01.setOption(option01);

7、實現數據定時切換，適合多數據無法全顯示情況；

全代碼如下；

var x_allData = ['晗寶SVANA的小店1', '晗寶SVANA的小店2', '晗寶SVANA的小店3', '晗寶SVANA的小店4', '晗寶SVANA的小店5', '晗寶SVANA的小店6', '晗寶SVANA的小店7', '晗寶SVANA的小店8', '晗寶SVANA的小店9', '晗寶SVANA的小店10', '晗寶SVANA的小店11', '晗寶SVANA的小店12'];var y_allData = [535, 452, 348, 214, 119, 200, 352, 148, 247, 150, 250, 180];var xData, yData;// 初始化xData = x_allData.slice(0, 5);yData = y_allData.slice(0, 5);updateChart(xData, yData)// 循環切換數據var n = Math.ceil(x_allData.length / 5); // 向上取整var cur = 2, start, end;var timer = setInterval(function() { if (cur > n) { cur = 1; }; start = (cur - 1) * 5; end = cur * 5; xData = x_allData.slice(start, end); yData = y_allData.slice(start, end); updateChart(xData, yData); cur++; console.log(cur)}, 3000);// 更新圖表function updateChart(xData, yData) { var myChart_sxyy = echarts.init(document.getElementById('sxyy')); var option_sxyy = { tooltip: { trigger: 'axis', axisPointer: { // 坐標軸指示器，坐標軸觸發有效 type: 'line' // 默認為直線，可選為：'line' | 'shadow' } }, grid: { left: '5%', right: '5%', bottom: 0, top: '5%', containLabel: true }, xAxis: { show: false, type: 'value' }, yAxis: [{ type: 'category', inverse: true, axisLabel: { show: true, textStyle: { color: '#fff', margin: 12, fontSize: 12, lineHeight: 15 } }, splitLine: { show: false }, axisTick: { show: false }, axisLine: { show: false }, data: xData }, { type: 'category', inverse: true, axisTick: 'none', axisLine: 'none', show: true, axisLabel: { textStyle: { color: '#ffffff', fontSize: 12 }, formatter: function(value) { return value.toLocaleString(); }, }, data: yData }], series: [{ name: '預約量', type: 'bar', zlevel: 1, itemStyle: { normal: { barBorderRadius: 30, color: new echarts.graphic.LinearGradient( 0, 0, 1, 0, [{ offset: 0, color: 'rgba(57,89,255, 1)' }, { offset: 1, color: 'rgba(46,200,207,1)' } ], false ) }, }, barWidth: 15, data: yData }, { name: '最大值', type: 'bar', barWidth: 15, barGap: '-100%', data: [1350, 1350, 1350, 1350, 1350], itemStyle: { normal: { color: 'rgba(24,31,68,1)', barBorderRadius: 30, } }, }, ] }; myChart_sxyy.setOption(option_sxyy, true);}

2、echarts折線顏色，echarts設置多條折線圖

在寫前端頁面時，我們遇到改變echarts折線顏色的需求。今天我給大家介紹下echarts折線圖如何修改折線顏色。

1、在編輯器里新建一個study.html，并在頭部引入echarts插件（可以去官網下載）

2、新建一個div，命名為test,并給div設置寬和高，用來生成折線圖.

3、在script標簽內通過id獲取到div，然后生成一個折線圖。

4、通過設置lineStyle下的color屬性來改變折線圖的折線顏色

5、在瀏覽器中打開頁面，發現折線圖里的折線已經變成黃色

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>

本文關鍵詞：echarts折線圖區域顏色漸變，echarts曲線顏色，echarts 線條顏色，echarts 折線顏色，echarts折線圖背景顏色設置。這就是關于《echarts折線顏色，echarts設置多條折線圖（分享7個常用的echarts示例）》的所有內容，希望對您能有所幫助！更多的知識請繼續關注《犇涌向乾》百科知識網站：！