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