Echarts 折线图Demo调色12种,可以直接使用~~~
测试Demo代码~~
<template> <div> <div id="myChart" ref="mapBox" style="width: 100%; height: 400px"></div> </div> </template> <script> import echarts from 'echarts' import chartMock from '../co-assets/chart-mock.js' const myOption = { title: { text: '折线图堆叠' }, tooltip: { trigger: 'axis' }, legend: { data: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12'] }, grid: { left: '3%', right: '4%', bottom: '3%', containLabel: true }, toolbox: { feature: { saveAsImage: {} } }, xAxis: { type: 'category', boundaryGap: false, data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'] }, yAxis: { type: 'value' }, series: [ { name: '1', type: 'line', stack: '总量', data: [120, 132, 101, 134, 90, 230, 210] }, { name: '2', type: 'line', stack: '总量', data: [220, 182, 191, 234, 290, 330, 310] }, { name: '3', type: 'line', stack: '总量', data: [150, 232, 201, 154, 190, 330, 410] }, { name: '4', type: 'line', stack: '总量', data: [320, 332, 301, 334, 390, 330, 320] }, { name: '5', type: 'line', stack: '总量', data: [820, 932, 901, 934, 1290, 1330, 1320] }, { name: '6', type: 'line', stack: '总量', data: [920, 1032, 1101, 1134, 1390, 1430, 1420] }, { name: '7', type: 'line', stack: '总量', data: [1020, 1132, 1201, 1234, 1490, 1430, 1520] }, { name: '8', type: 'line', stack: '总量', data: [1220, 1332, 1301, 1334, 1590, 1530, 1620] }, { name: '9', type: 'line', stack: '总量', data: [1320, 1432, 1801, 1834, 1890, 1830, 1820] }, { name: '10', type: 'line', stack: '总量', data: [2220, 2232, 3201, 3334, 3490, 3530, 3620] }, { name: '11', type: 'line', stack: '总量', data: [2420, 2432, 3401, 3434, 3790, 3730, 3820] }, { name: '12', type: 'line', stack: '总量', data: [3220, 3232, 4201, 4334, 4490, 5530, 5620] } ] } export default { data() { return {} }, mounted() { this.myChart = echarts.init(this.$refs.mapBox) this.setChartOnion() window.addEventListener('resize', this.resizeTheChart) }, methods: { resizeTheChart() { // console.log("縮放執行中~~~"); if (this.$refs && this.$refs.mapBox) { const myChartNode = document.getElementById('myChart') if (myChartNode) { myChartNode.style.height = myChartNode.offsetWidth * 0.5 + 'px' } this.myChart.resize() } }, setChartOnion() { myOption.series.forEach((item, i) => { item.areaStyle = { color: {} } item.itemStyle = { color: {} } // item = { // name: item.name, // type: 'line', // symbol: 'none', // // symbol:'circle', // 折线点设定为实心点 // // symbolSize: 9, // 设定折线点的大小 // // smooth: true, //折点是圆弧状的 // // showSymbol: true, // // symbol: "circle", //折点设定为实心点 // // symbolSize: 20, // stack: item.stack, // data: item.data, // itemStyle: { color: {} }, // areaStyle: { color: {} }, // lineStyle: {} // } // 設置折線圖顏色 if (chartMock.itemStyleArr[i]) { item.itemStyle = chartMock.itemStyleArr[i].lineStyle item.areaStyle.color = chartMock.itemStyleArr[i]['color'] } }) this.myChart.setOption(myOption) } } } </script>
export default { itemStyleArr: [ { // 颜色渐变函数 前四个参数分别表示四个位置依次为左、下、右、上 color: { type: 'linear', x: 0, y: 0, x2: 0, y2: 1, colorStops: [ { offset: 0, color: '#d7f4f8' // 0% 处的颜色 }, { offset: 0.5, color: '#b8eff7' // 100% 处的颜色 }, { offset: 1, color: '#fff' // 100% 处的颜色 } ], global: false // 缺省为 false }, // 背景渐变色 lineStyle: { normal: { color: '#4fd6d2', // 图例的颜色 lineStyle: { // 系列级个性化折线样式 width: 2, type: 'solid', color: '#4fd6d2' } } }, emphasis: { color: '#4fd6d2', lineStyle: { // 系列级个性化折线样式 width: 2, type: 'dotted', color: '#4fd6d2' // 折线的颜色 } } }, // 线条样式1 { // 颜色渐变函数 前四个参数分别表示四个位置依次为左、下、右、上 color: { type: 'linear', x: 0, y: 0, x2: 0, y2: 1, colorStops: [ { offset: 0, color: '#81befd' // 0% 处的颜色 }, { offset: 0.4, color: '#bad7f5' // 100% 处的颜色 }, { offset: 1, color: '#fff' // 100% 处的颜色 } ], global: false // 缺省为 false }, // 背景渐变色 lineStyle: { normal: { color: '#0180ff', // 图例的颜色 lineStyle: { // 系列级个性化折线样式 width: 2, type: 'solid', color: '#0180ff' } } }, emphasis: { color: '#0180ff', lineStyle: { // 系列级个性化折线样式 width: 2, type: 'dotted', color: '0180ff' } } }, // 线条样式2 { // 颜色渐变函数 前四个参数分别表示四个位置依次为左、下、右、上 color: { type: 'linear', x: 0, y: 0, x2: 0, y2: 1, colorStops: [ { offset: 0, color: '#b581fd' // 0% 处的颜色 }, { offset: 0.4, color: '#f9e4ff' // 40% 处的颜色 }, { offset: 1, color: '#fff' // 100% 处的颜色 } ], global: false // 缺省为 false }, // 背景渐变色 lineStyle: { normal: { color: '#b581fd', // 图例的颜色 lineStyle: { // 系列级个性化折线样式 width: 2, type: 'solid', color: '#b581fd' } } }, emphasis: { color: 'red', lineStyle: { // 系列级个性化折线样式 width: 1, type: 'dotted', color: 'red' } } }, // 线条样式3 { // 颜色渐变函数 前四个参数分别表示四个位置依次为左、下、右、上 color: { type: 'linear', x: 0, y: 0, x2: 0, y2: 1, colorStops: [ { offset: 0, color: '#6699FF' // 0% 处的颜色 }, { offset: 0.4, color: '#9ebbf5' // 100% 处的颜色 }, { offset: 1, color: '#fff' // 100% 处的颜色 } ], global: false // 缺省为 false }, // 背景渐变色 lineStyle: { normal: { color: '#6699FF', // 图例的颜色 lineStyle: { // 系列级个性化折线样式 width: 2, type: 'solid', color: '#6699FF' } } }, emphasis: { color: '#6699FF', lineStyle: { // 系列级个性化折线样式 width: 1, type: 'dotted', color: '#6699FF' } } }, // 线条样式4 { // 颜色渐变函数 前四个参数分别表示四个位置依次为左、下、右、上 color: { type: 'linear', x: 0, y: 0, x2: 0, y2: 1, colorStops: [ { offset: 0, color: '#FF99FF' // 0% 处的颜色 }, { offset: 0.4, color: '#f7d2f7' // 100% 处的颜色 }, { offset: 1, color: '#fff' // 100% 处的颜色 } ], global: false // 缺省为 false }, // 背景渐变色 lineStyle: { normal: { color: '#FF99FF', // 图例的颜色 lineStyle: { // 系列级个性化折线样式 width: 2, type: 'solid', color: '#FF99FF' } } }, emphasis: { color: '#FF99FF', lineStyle: { // 系列级个性化折线样式 width: 1, type: 'dotted', color: '#FF99FF' } } }, // 线条样式5 { // 颜色渐变函数 前四个参数分别表示四个位置依次为左、下、右、上 color: { type: 'linear', x: 0, y: 0, x2: 0, y2: 1, colorStops: [ { offset: 0, color: '#2d2df7' // 0% 处的颜色 }, { offset: 0.4, color: '#9898f7' // 100% 处的颜色 }, { offset: 1, color: '#fff' // 100% 处的颜色 } ], global: false // 缺省为 false }, // 背景渐变色 lineStyle: { normal: { color: '#2d2df7', // 图例的颜色 lineStyle: { // 系列级个性化折线样式 width: 2, type: 'solid', color: '#2d2df7' } } }, emphasis: { color: '#2d2df7', lineStyle: { // 系列级个性化折线样式 width: 1, type: 'dotted', color: '#2d2df7' } } }, // 线条样式6 { // 颜色渐变函数 前四个参数分别表示四个位置依次为左、下、右、上 color: { type: 'linear', x: 0, y: 0, x2: 0, y2: 1, colorStops: [ { offset: 0, color: '#7a4ffb' // 0% 处的颜色 }, { offset: 0.4, color: '#beacf5' // 100% 处的颜色 }, { offset: 1, color: '#fff' // 100% 处的颜色 } ], global: false // 缺省为 false }, // 背景渐变色 lineStyle: { normal: { color: '#7a4ffb', // 图例的颜色 lineStyle: { // 系列级个性化折线样式 width: 2, type: 'solid', color: '#7a4ffb' } } }, emphasis: { color: '#7a4ffb', lineStyle: { // 系列级个性化折线样式 width: 1, type: 'dotted', color: '#7a4ffb' } } }, // 线条样式7 { // 颜色渐变函数 前四个参数分别表示四个位置依次为左、下、右、上 color: { type: 'linear', x: 0, y: 0, x2: 0, y2: 1, colorStops: [ { offset: 0, color: '#cc3399' // 0% 处的颜色 }, { offset: 0.4, color: '#d08cb9' // 100% 处的颜色 }, { offset: 1, color: '#fff' // 100% 处的颜色 } ], global: false // 缺省为 false }, // 背景渐变色 lineStyle: { normal: { color: '#cc3399', // 图例的颜色 lineStyle: { // 系列级个性化折线样式 width: 2, type: 'solid', color: '#cc3399' } } }, emphasis: { color: '#cc3399', lineStyle: { // 系列级个性化折线样式 width: 1, type: 'dotted', color: '#cc3399' } } }, // 线条样式8 { // 颜色渐变函数 前四个参数分别表示四个位置依次为左、下、右、上 color: { type: 'linear', x: 0, y: 0, x2: 0, y2: 1, colorStops: [ { offset: 0, color: '#ce3df3' // 0% 处的颜色 }, { offset: 0.4, color: '#df9cf1' // 100% 处的颜色 }, { offset: 1, color: '#fff' // 100% 处的颜色 } ], global: false // 缺省为 false }, // 背景渐变色 lineStyle: { normal: { color: '#ce3df3', // 图例的颜色 lineStyle: { // 系列级个性化折线样式 width: 2, type: 'solid', color: '#ce3df3' } } }, emphasis: { color: '#ce3df3', lineStyle: { // 系列级个性化折线样式 width: 1, type: 'dotted', color: '#ce3df3' } } }, // 线条样式9 { // 颜色渐变函数 前四个参数分别表示四个位置依次为左、下、右、上 color: { type: 'linear', x: 0, y: 0, x2: 0, y2: 1, colorStops: [ { offset: 0, color: '#ff6666' // 0% 处的颜色 }, { offset: 0.4, color: '#f3a0a0' // 100% 处的颜色 }, { offset: 1, color: '#fff' // 100% 处的颜色 } ], global: false // 缺省为 false }, // 背景渐变色 lineStyle: { normal: { color: '#ff6666', // 图例的颜色 lineStyle: { // 系列级个性化折线样式 width: 2, type: 'solid', color: '#ff6666' } } }, emphasis: { color: '#ff6666', lineStyle: { // 系列级个性化折线样式 width: 1, type: 'dotted', color: '#ff6666' } } }, // 线条样式10 { // 颜色渐变函数 前四个参数分别表示四个位置依次为左、下、右、上 color: { type: 'linear', x: 0, y: 0, x2: 0, y2: 1, colorStops: [ { offset: 0, color: '#f7aa37' // 0% 处的颜色 }, { offset: 0.4, color: '#f1bf75' // 100% 处的颜色 }, { offset: 1, color: '#fff' // 100% 处的颜色 } ], global: false // 缺省为 false }, // 背景渐变色 lineStyle: { normal: { color: '#f7aa37', // 图例的颜色 lineStyle: { // 系列级个性化折线样式 width: 2, type: 'solid', color: '#f7aa37' } } }, emphasis: { color: '#f7aa37', lineStyle: { // 系列级个性化折线样式 width: 1, type: 'dotted', color: '#f7aa37' } } }, // 线条样式11 { // 颜色渐变函数 前四个参数分别表示四个位置依次为左、下、右、上 color: { type: 'linear', x: 0, y: 0, x2: 0, y2: 1, colorStops: [ { offset: 0, color: '#ffcc33' // 0% 处的颜色 }, { offset: 0.4, color: '#f5d77e' // 100% 处的颜色 }, { offset: 1, color: '#fff' // 100% 处的颜色 } ], global: false // 缺省为 false }, // 背景渐变色 lineStyle: { normal: { color: '#ffcc33', // 图例的颜色 lineStyle: { // 系列级个性化折线样式 width: 2, type: 'solid', color: '#ffcc33' } } }, emphasis: { color: '#ffcc33', lineStyle: { // 系列级个性化折线样式 width: 1, type: 'dotted', color: '#ffcc33' } } }, // 线条样式12 { // 颜色渐变函数 前四个参数分别表示四个位置依次为左、下、右、上 color: { type: 'linear', x: 0, y: 0, x2: 0, y2: 1, colorStops: [ { offset: 0, color: '#efef33' // 0% 处的颜色 }, { offset: 0.4, color: '#fbfb87' // 100% 处的颜色 }, { offset: 1, color: '#fff' // 100% 处的颜色 } ], global: false // 缺省为 false }, // 背景渐变色 lineStyle: { normal: { color: '#efef33', // 图例的颜色 lineStyle: { // 系列级个性化折线样式 width: 2, type: 'solid', color: '#efef33' } } }, emphasis: { color: '#efef33', lineStyle: { // 系列级个性化折线样式 width: 1, type: 'dotted', color: '#efef33' } } } // 线条样式11 ] };