echarts中graphic_Echarts实现折线图
1.引用Echarts的js
var arr =[];
var rgs=[];
var jqs=[];
这里调用ajax把对应的值赋给定义的数组
function chartShow(arr,rgs,jqs) {
myChart.setOption({
title: {
text: ‘质控月度评分’ // 标题栏
},
tooltip: { // 提示框
trigger: ‘axis’, // 触发类型
axisPointer: { // 坐标轴指示器配置项
type: ‘cross’,
label: {
backgroundColor: ‘#6a7985’
}
}
},
legend: { // 图例组件
orient: ‘horizontal’, // 图例列表的布局朝向
right: 1, // 图例组件离容器右侧的距离
textStyle: {
color: ‘#6e6e6e’, // 字体颜色
fontWeight: ‘normal’,
fontSize: 12
},
data: [‘人工质控’, ‘机器质控’] // 和series 中的name对应
},
grid: { // 直角坐标系内绘图网格
left: ‘3%’,
top: ‘15%’,
containLabel: true
},
xAxis: [{
type: ‘category’,
name: ‘年/月’,
boundaryGap: false,
axisLabel: {
show: true,
textStyle: {
color: ‘#8a94a3’ // 坐标字体颜色
},
// rotate: 0 // 坐标倾斜角度
},
axisLine: {
lineStyle: {
color: ‘black’, // x坐标轴颜色
}
},
data: arr
}],
yAxis: {
type: ‘value’,
name: ‘平均分’,
axisLine: { //坐标轴线条相关设置(颜色等)
lineStyle: {
color: ‘black’ // y轴颜色
}
},
axisLabel: {
formatter: ‘{value}’,
textStyle: {
color: ‘#babced’
}
},
splitLine: {
lineStyle: {
color: ‘#57617B’ //分隔线颜色设置
}
}
},
series: [
{
name: ‘人工质控’,
type: ‘line’,
symbol: ‘circle’, //标记的图形
symbolSize: 8, // 拐点的大小
label: {
normal: {
show: true,
color: ‘#4a9eff’, // 数字颜色
position: ‘top’
}
},
itemStyle: {
normal: {
borderColor: ‘#3794FF’, // 边框颜色
color: ‘#3794FF’, // 折线上标记点的颜色 和 图例的颜色
lineStyle: {
width: 4, // 折线图的粗细
color: ‘#4a9eff’ // 折线的颜色
}
}
},
areaStyle: {
normal: {
type: ‘default’,
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0,
color: ‘#4a9eff’ // 区域颜色
}, {
offset: 1,
color: ‘#4a9eff’ // 区域颜色
}], false)
}
},
data: rgs
},
{
name: ‘机器质控’,
type: ‘line’,
symbol: ‘circle’, //标记的图形
symbolSize: 10, // 拐点的大小
label: {
normal: {
show: true,
color: ‘#4a9eff’, // 数字颜色
position: ‘top’
}
},
itemStyle: {
normal: {
borderColor: ‘orange’, // 边框颜色
color: ‘orange’, // 折线上标记点的颜色 和 图例的颜色
lineStyle: {
width: 4, // 折线图的粗细
color: ‘orange’ // 折线的颜色
}
}
},
areaStyle: {
normal: {
type: ‘default’,
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0,
color: ‘orange’ // 区域颜色
}, {
offset: 1,
color: ‘orange’ // 区域颜色
}], false)
}
},
data: jqs
}
]
});
// myChart.setOption(option);
// });
//}
}
标签:颜色,normal,实现,质控,color,图例,折线图,type,Echarts
来源: https://blog.csdn.net/wqwq093030/article/details/102752805
echarts中graphic_Echarts实现折线图相关推荐
- ECharts问题--柱状图和折线图中xAxis.data为空时报错问题解决
ECharts问题--柱状图和折线图中xAxis.data为空时报错问题解决 参考文章: (1)ECharts问题--柱状图和折线图中xAxis.data为空时报错问题解决 (2)https://ww ...
- 解决echarts的叠堆折线图数据出现坐标和值对不上的问题
说一个小bug,解决echarts的叠堆折线图数据出现坐标和值对不上的问题. 在echarts的叠堆折线图中,有这样的一个问题,从后端请求过来的数据是正确的,但是请求的y轴的值和y轴坐标对不上. 这个 ...
- echarts:多组折线-图
Echarts是一个基于JavaScript的开源可视化库,它可以用来绘制各种类型的图表,包括折线图.柱状图.饼图等等.在本文中,我们将使用Echarts绘制一个多组折线-图的完整示例. echart ...
- Echarts实现堆叠柱状图+折线图
Echarts实现堆叠柱状图+折线图,以便后续使用时复制 //堆疊Bar圖+折線圖 option = {title: {text: '动态数据',subtext: '纯属虚构'},tooltip: { ...
- Vue中引入echarts的步骤,折线图、柱状图、饼图的常用配置项
vue中引入echarts 一.安装echarts 二.引入echarts 1.全局引入 2.局部引入 三.vue中使用echarts 1.准备好函数 2.准备一个容器来放echarts 3.初始化容 ...
- Echarts最简单的折线图、柱图、饼图、仪表盘+sql语句
注:以后所有升级版的图形化显示都在此基础上延伸,打好基础才是硬道理本人小白一枚〜欢迎来讨论 一,柱图显示: HTM页面: <html style="height: 100%" ...
- echarts 百万数据_GitHub - AricZhu/echarts-billion-data-disp: 针对 echarts 百万数据的折线图优化...
echarts 百万数据 折线图优化 随着 echarts 4.0 的发布,官网宣布可以支持千万数据量的渲染了,但目前并非支持所有的图,只支持散点图,线图 点此查看 而针对最基本的折线图等官方虽然提供 ...
- 可视化例子(11)——ECharts line3D制作三维折线图
因工作需要,制作了三维折线图,可以看到三个变量的变化.其效果如下图所示: 其中遇到了一个很大的问题,line3D 无法出现标签(查看了所有配置项,均没有该配置,这应该是 ECharts 的一个 bug ...
- Apache Echarts常用图表之折线图
文章目录 Echarts常用图表 折线图 1. 折线图的实现步骤 2. 折线图的常见效果 最大值\最小值 `markPoint` 平均值 `markLine` 标注区间 `markArea` 数值显示 ...
最新文章
- 如何更改jupyter notebook默认存储路径
- Javascript之学习笔记每日更新
- javaScript 内存管理机制
- Angular ngOnChanges hook学习笔记
- 使用Apache Hadoop计算PageRanks
- 南科大计算机系实力a,五大竞赛学科A+高校排行榜发布!北大实力碾压,科大赶超清华...
- 在CentOS 7中安装PHP5和PHP7需要的插件
- 网站内部的基本SEO优化
- Bitmap头文件说明
- 计算机的标准输入法,ALKATIP输入法电脑版
- java排查full gc_一次full gc的排查经历
- zabbix Event acknowledgment事件确认
- 盖世兔I9100刷机心得
- 算法面试中:时间复杂度和空间复杂度是什么?
- ChucK初步(1)
- 天创速盈带您速读:拼多多有必要开直通车吗?有哪些禁忌?
- android studio记账,Android Studio--家庭记账本(三)
- 公众号榜单 | 2020·7月公众号地区排行榜重磅发布
- 中国企业实施ERP之难点全攻略
- STM32+ MAX30102通过指尖测量心率+血氧饱和度
热门文章
- Java 中子类是否只继承父类的非私有变量和方法?
- 又一次摔MFC坑里了
- SharePoint 站点出现Http 503 错误
- Java基础知识之变量与常量、数据类型、类型转换
- 应届生去软通动力怎么样_直播回看!信通院/浪潮/软通智慧…金句频出,看看你错过了什么?...
- Python绘制带有中文标签和图例的图
- Python绘制三次贝塞尔曲线
- 一文搞定数据结构(图解)
- 1049. 最后一块石头的重量 II(JavaScript)
- linux命令行改名字,使用nmcli在Linux命令行中更改或设置主机名的方法