vue中的一个 Echarts 和 点击事件

HTML部分

<div class="Msg-curve" id="curveEcharts"></div>

JS部分

// main.js中全局引入echarts然后调用 this.$echarts

let myChart = this.$echarts.init(document.getElementById('curveEcharts'))
                // 绘制图表
                myChart.setOption({
                    title: {
                        text: ''
                    },
                    grid:{ // 上下左右间距大小
                        x:50,
                        y:10,
                        x2:50,
                        y2:50
                    },
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {    
                            type: 'shadow'   
                        },
                    },
                    xAxis: {
                        type: 'category',
                        data: [],
                        show: true, // 不显示坐标轴线、坐标轴刻度线和坐标轴上的文字
                        axisLabel: {
                            textStyle: {
                                color: '#fff',//坐标值得具体的颜色
                            }
                        },
                        //设置轴线的属性
                        axisLine:{
                            lineStyle:{
                                color:'#FFFFFF',
                                width:0,    //这里是为了突出显示加上的
                            }
                        }
                    },
                    yAxis: {
                        type: 'value',
                        axisLabel: {
                            show: true,
                            textStyle: {
                                color: '#FFFFFF'  // y坐标轴字体颜色
                            }
                        },
                        splitLine: {
                            show: true, //去除网格线
                            lineStyle: {
                                type: 'dashed' //设置网格线类型
                            },
                        },
                        axisTick: { // y轴刻度线
                            show: false
                        },
                        axisLine: { // y轴
                            show: false,
                        }
                    },
                    series: [{
                        name: '事件总数',
                        type: 'line',
                        smooth: true,
                        areaStyle: {
                          normal: {
                            color: {
                              x: 0,
                              y: 0,
                              x2: 0,
                              y2: 1,
                              colorStops: [{
                                  offset: 1,
                                  color: "rgba(39,148,173,1)" // 0% 处的颜色
                                }, {
                                  offset: 1,
                                  color: "rgba(220,56,129,0)" // 100% 处的颜色
                                 }],
                                  globalCoord: false // 缺省为 false
                                }
                              }
                        },
                        data: [10, 20, 50, 30, 40, 10],
                        color: '#2091BB',
                        itemStyle: {
                            normal: {
                                lineStyle: {
                                    color: '#2091BB'
                                }
                            }
                        },
                    }]
                });

// 添加点击事件
                myChart.on('click', function(param) {
                    // console.log(param.data.name);
                    if(param.data.name == '') {
                        that.barArr = [10,60,40];
                        that.barColor = '#CA8622';
                        that.nowdaybar();
                    } else if(param.data.name == '') {
                        that.barArr = [30,40,60];
                        that.barColor = '#0C92EF';
                        that.nowdaybar();
                    } else if(param.data.name == '') {
                        that.barArr = [50,20,60];
                        that.barColor = '#C23531';
                        that.nowdaybar();
                    }
                });

HTML部分

<div class="Msg-curve" id="curveEcharts"></div>

JS部分

// main.js中全局引入echarts然后调用 this.$echarts

let myChart = this.$echarts.init(document.getElementById('curveEcharts'))
                // 绘制图表
                myChart.setOption({
                    title: {
                        text: ''
                    },
                    grid:{ // 上下左右间距大小
                        x:50,
                        y:10,
                        x2:50,
                        y2:50
                    },
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {    
                            type: 'shadow'   
                        },
                    },
                    xAxis: {
                        type: 'category',
                        data: [],
                        show: true, // 不显示坐标轴线、坐标轴刻度线和坐标轴上的文字
                        axisLabel: {
                            textStyle: {
                                color: '#fff',//坐标值得具体的颜色
                            }
                        },
                        //设置轴线的属性
                        axisLine:{
                            lineStyle:{
                                color:'#FFFFFF',
                                width:0,    //这里是为了突出显示加上的
                            }
                        }
                    },
                    yAxis: {
                        type: 'value',
                        axisLabel: {
                            show: true,
                            textStyle: {
                                color: '#FFFFFF'  // y坐标轴字体颜色
                            }
                        },
                        splitLine: {
                            show: true, //去除网格线
                            lineStyle: {
                                type: 'dashed' //设置网格线类型
                            },
                        },
                        axisTick: { // y轴刻度线
                            show: false
                        },
                        axisLine: { // y轴
                            show: false,
                        }
                    },
                    series: [{
                        name: '事件总数',
                        type: 'line',
                        smooth: true,
                        areaStyle: {
                          normal: {
                            color: {
                              x: 0,
                              y: 0,
                              x2: 0,
                              y2: 1,
                              colorStops: [{
                                  offset: 1,
                                  color: "rgba(39,148,173,1)" // 0% 处的颜色
                                }, {
                                  offset: 1,
                                  color: "rgba(220,56,129,0)" // 100% 处的颜色
                                 }],
                                  globalCoord: false // 缺省为 false
                                }
                              }
                        },
                        data: [10, 20, 50, 30, 40, 10],
                        color: '#2091BB',
                        itemStyle: {
                            normal: {
                                lineStyle: {
                                    color: '#2091BB'
                                }
                            }
                        },
                    }]
                });

// 添加点击事件
                myChart.on('click', function(param) {
                    // console.log(param.data.name);
                    if(param.data.name == '') {
                        that.barArr = [10,60,40];
                        that.barColor = '#CA8622';
                        that.nowdaybar();
                    } else if(param.data.name == '') {
                        that.barArr = [30,40,60];
                        that.barColor = '#0C92EF';
                        that.nowdaybar();
                    } else if(param.data.name == '') {
                        that.barArr = [50,20,60];
                        that.barColor = '#C23531';
                        that.nowdaybar();
                    }
                });