这几天项目中有遇到一个echart图表的地方，效果如下，我作为一个前端小菜鸟，也是第一次使用，之前一直觉得echart图对我来说很难，实际操作了一下，发现也就那么回事了，哈哈，其实跟着官网写，效果很快就出来了

image.png

首先是在页面中引入echart,我是跟着官网写的

对于项目中需要修改图表的样式，我是参考了这位博主的 https://my.oschina.net/u/2440810/blog/3066067

代码如下

  getEchart() {
                var myChart = echarts.init(document.getElementById('twitter_chart'));
                this.option = {
                    xAxis: {
                        type: 'category',
                        boundaryGap: false,
                        data: this.chartTime,
                        // data:[2,3,5,5,6,3,5,5,4,],
                    },
                    tooltip : {
                        trigger: 'axis',
                        backgroundColor:'#FB6451',
                        width: 50
                    },
                    formatter : function(params,) {
                        return  params[0].data;
                    },
                    yAxis: {
                        type: 'value',
                    },
                    axisLine: {
                        onZero: false,
                        lineStyle: {
                            color: "#FB6451"
                        },
                        label:{show:true},
                    },
                    series: [{
                        data: this.clickData,
                        type: 'line',
                        color: '#FB6451',
                        itemStyle:{
                            color: '#FB6451',
                            normal: {
                                lineStyle: {
                                    width: 2,
                                    type: 'solid',
                                    color: '#FB6451', //线条颜色
                                }
                            },
                            emphasis: {
                                color: '#FB6451', //点击小圆圈内的颜色
                            }
                        },
                        areaStyle:{
                            //区域颜色渐变
                            normal:{
                                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                    offset: 0,
                                    color: '#FDC1B9'
                                }, {
                                    offset: 1,
                                    color: 'rgba(251,100,81,0.00)'
                                }])

                            }
                        },
                    },
                    ]
                };
                myChart.setOption(this.option);
            },