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
]
};
Echarts 折线图Demo调色12种，可以直接使用~~~的更多相关文章
- echarts折线图Demo
echarts链接:http://echarts.baidu.com/examples/editor.html?c=line-stack 黑底代码:http://gallery.echartsjs.c ...
- d3.js 教程 模仿echarts折线图
今天我们来仿echarts折线图,这个图在echarts是折线图堆叠,但是我用d3改造成了普通的折线图,只为了大家学习(其实在简单的写一个布局就可以).废话不多说商行代码. 1 制作 Line 类 c ...
- 实现Echarts折线图的虚实转换
需求:医院的体温单,在统计体温时,对于正常情况下统计的体温数据,需要显示实线:对于进行物理降温后统计的体温数据,需要显示虚线. 现有的体温单是运用 Echarts 折线图,统一用实线显示.因此在这基础 ...
- echarts折线图动态改变数据时的一个bug
echarts折线图中当增加dataZoom,修改start大于0的时候,会出现折线混乱,变成竖直的线,绘制有问题. 解决方法,在dataZoom中增加filterMode: 'empty' http ...
- ECharts折线图堆叠设置为不堆叠的方法
下图是ECharts折线图堆叠的官方源码,设置折线图不堆叠只需要将每一个stack的值设置为不一样的名称或者将stack属性删除即可. option = { title: { text: '折线图堆叠 ...
- echarts折线图，数据切换时（最近七天）绘图不合理现象
echarts折线图,当进行数据切换时存在绘制不合理的问题,数据没错,但绘制不对. 两个0之间的连线应该是平滑直线,如图: 正确的显示: 解决: 在myCharts.setOption(option) ...
- vue使用axios读取本地json文件来显示echarts折线图
编辑器:HBuilderx axios文档:http://www.axios-js.com/zh-cn/docs/ echarts实例:https://echarts.apache.org/examp ...
- Echarts 折线图y轴标签值太长时显示不全的解决办法
问题 分析 解决办法 问题 先看一下正常的情况 再看一下显示不全的情况 所有的数据都是从后台取的,也就是说动态变化的,一开始的时候数据量不大不会出现问题,后面y轴的值越来越大的时候就出现了这个显示不全 ...
- 知识点4: 配置echarts折线图和饼图
折线图 效果图 html <template> <div id="v11-charts3"></div> </template> j ...
- echarts折线图相关
optionJKDLine = { title: { text: '告警数量趋势图', textStyle:{ //标题样式 fontStyle:'normal', fontFamily:'sans- ...
随机推荐
- Windows下pip换成清华源
1.在C:\Users\用户名\ 下创建 pip 文件夹2.在文件夹内创建pip.ini 文件, 添加如下内容: [global] timeout = 6000 index-url = https:/ ...
- Java多线程的几种创建方式
方法一:继承Thread类,重写run方法,直接调用start方法开启线程. /** * 继承Thread类,直接调用start方法开启线程. * @author LuRenJia */ public ...
- java反序列化cc_link_one2
CC-LINK-one_second 前言 这条链子其实是上一条链子的另一种走法,在调用危险函数哪里是没有什么变化的 整体链子 还是尾部没有变化嘛还是InvokerTransformer的transf ...
- linux如何删除多余网卡
ifconfig tunl0 down ip link delete tunl0
- 2.mysql-库表行管理
1.数据库管理 1.1 SQL语句 1.1.1 查看当前所有的数据库 show databases; 1.1.2 创建数据库 create database 数据库名; create databse ...
- CodeGeeX：vscode中全新的智能代码补全插件
大家好我是费老师,代码智能补全是近几年非常热门的话题,有前不久宣告项目终结的kite,反响平平的tabnine,以及最近吃了一堆官司的copilot. 而广大从事编程工作的用户只关心市面上的代码智能补 ...
- 关于Linux pyinstaller打包zmq.h报错
报错信息 6:10: fatal error: zmq.h: No such file or directory #include <zmq.h> ^~~~~~~ compilation ...
- 解决PyQt5报错defaultServiceProvider::requestService(): no service found for..
简述 之前因为这个报错解决了很长时间,因为我之前一直是用 pip3 工具安装的 PyQt5 ,但是用 pip3 工具安装 PyQt5 后, 自己写的音乐播放器一直没有声音,而且还有不能调用 fcitx ...
- kettle 链接oracle12c
jdbc连接cdb数据库时,url兼容以下2种模式: "jdbc:oracle:thin:@192.168.75.131:1521:oracle12c" "jdbc:or ...
- supervisor安装与监控nginx
安装参考:https://www.cnblogs.com/zgcblog/p/10192077.html https://www.cnblogs.com/yangbo981205/p/14928897 ...