Echarts实现折线图

1.引用Echarts的js

2.这里调用ajax把对应的值赋给定义的数组

    var arr =[];
	var rgs=[];
	var jqs=[];
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);
//        });
//}
    }