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