关于【echarts折线颜色】，echarts设置多条折线图，今天向乾小编给您分享一下，如果对您有所帮助别忘了关注本站哦。
内容导航：1、echarts折线颜色：分享7个常用的echarts示例2、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示例）》的所有内容，希望对您能有所帮助！