Echars曲线图的详细实现

分析实现目标曲线图需要哪些重要步骤：

1. y轴由数值向类别的转化
2. 显示y轴直线
3. 重点：x轴某刻度只显示某标签
4. 改变曲线颜色
5. 取消曲线上的小圆圈

1. y轴由数值向类别的转化

上篇博客有详解，传送门：Echars散点图的详细实现

2.显示y轴直线

axisLine: {show:true}

3.👉🏻 重点👈🏻：x轴某刻度只显示某标签

·x轴使用的是类目轴，即type: ‘category’
·创建一个要显示标签的刻度数组，即var b = [“2020-03-02 10:10:10”,“2020-03-02 10:10:20”,“2020-03-02 10:10:35”,“2020-03-02 10:10:48”]
· 使用indexOf()函数，再利用if判断刻度数组b里面的元素与value是否相同，相同的话则向texts:[ ]数组里面push进刻度的标签

xAxis: {
         axisLabel:{
            formatter: function (value) {
            var b = ["2020-03-02 10:10:10","2020-03-02 10:10:20","2020-03-02 10:10:35","2020-03-02 10:10:48"]
            var texts = [];
            if(b.indexOf(value) == 0){
                 texts.push('电话接通');
            }else if (b.indexOf(value) == 1){
                 texts.push('沟通解答');
            }else if (b.indexOf(value) == 2){
                 texts.push('提出问题');
            }else if (b.indexOf(value) == 3){
                 texts.push('最终反馈');
            }
            return texts;
            }
        },
    },

4. 改变曲线颜色

series: [{
        itemStyle: {
				normal: {
					lineStyle: {
						color: '#2EB6F5' //改变曲线颜色
					}
				}
			},
    }]

5. 取消曲线上的小圆圈

symbol:'none'  （在series里面添加）

❤️❤️❤️实现上面的步骤，就得到心目中的曲线图啦❤️❤️❤️

贴上完整代码💁🏻

option = {
    xAxis: {
        type: 'category',
        boundaryGap: false,//第一个元素从0开始
        splitLine:{
            show:false,
        } ,//去除网格线
         axisLabel:{
            formatter: function (value) {
            var b = ["2020-03-02 10:10:10","2020-03-02 10:10:20","2020-03-02 10:10:35","2020-03-02 10:10:48"]
            var texts = [];
            if(b.indexOf(value) == 0){
                 texts.push('电话接通');
            }else if (b.indexOf(value) == 1){
                 texts.push('沟通解答');
            }else if (b.indexOf(value) == 2){
                 texts.push('提出问题');
            }else if (b.indexOf(value) == 3){
                 texts.push('最终反馈');
            }
            return texts;
            }
        },
    },
    yAxis: {
        type: 'value',
        min:0,
        max:3,
        interval:1.5,//间隔
        axisLine: {show:true},//显示y轴直线
        splitLine:{
            show:true,//显示网格线
            lineStyle: {
                type: 'dashed'//虚线
            }
    } ,
         axisLabel:{
            formatter: function (value) {
            var texts = [];
            if(value==0){
            texts.push('愤怒');
            }
            else if (value==1.5) {
            texts.push('平和');
            }else if(value==3){
                texts.push('喜悦');
            }
            return texts;
            }
        },
    },
    series: [{
        data: [
            ['2020-03-02 10:10:10', 0.5],
            ['2020-03-02 10:10:15',1.8],
            ['2020-03-02 10:10:20',2],
            ['2020-03-02 10:10:22',1],
            ['2020-03-02 10:10:24',1.5],
            ['2020-03-02 10:10:30',1.4],
            ['2020-03-02 10:10:35',2.3],
            ['2020-03-02 10:10:38',2.5],
            ['2020-03-02 10:10:40',1.4],
            ['2020-03-02 10:10:41',1.1],
            ['2020-03-02 10:10:45',1.2],
            ['2020-03-02 10:10:48',1.9],
            ['2020-03-02 10:10:55',1.9],
            ],
        type: 'line',
        smooth: true,//线条圆滑
        symbol:'none',//去掉曲线上的圆点
        itemStyle: {
				normal: {
					lineStyle: {
						color: '#2EB6F5' //改变曲线颜色
					}
				}
			},
    }]
};