echarts折线图数据配置

1. 引入echarts
   在 链接 选择 dist/echarts.js，点击另存至项目,保存为 echarts.js 文件。
   
2. 项目内引入(这里用html文件举例,框架是vue)

//引入刚才下载的echarts.js文件
<script src="/assets/js/echarts.js"></script>

3. 使用

   <!--准备一个容器,会在这里绘制统计图-->
   <div ref="myChart" style="width: 100%;height: 400px;"></div>

methods:{
         //折线图
            initChart() {
                let myChart = echarts.init(this.$refs.myChart)
                let option = {   
                    xAxis: {
                        type: 'category',
                        boundaryGap: false,
                        data:this.dayList //动态的x轴数据 例如:  data:['2022-01-01','2022-01-02','2022-01-03','2022-01-04']
                    },
                    yAxis: {
                        type: 'value'
                    },
                    grid: {
                        x: 45,
                        y: 30,
                        x2: 30,
                        y2: 20,
                        borderWidth: 1
                    },
                    //鼠标移动hover跟随显示当前值
                    tooltip : {
                        trigger: 'axis',
                        axisPointer: {
                            type: 'cross',
                            label: {
                                backgroundColor: '#6a7985'
                            }
                        }
                    },
                    series: [
                        {

                            data:this.yAxisDataList, //y轴要显示的动态数据; 例:    data:[30,170,100,50],
                            type: 'line',//统计图的类型,如:line是折线图, pie是饼状图
                            color:'#3e8de0',//折线颜色
                            symbol:'none',//去除折线小圆点
                            smooth:'0.3',//设置折线弧度
                            // itemStyle : { normal: {label : {show: true}}},//设置每个节点都显示数值
                            areaStyle: {
                                normal: {
                                    color: new echarts.graphic.LinearGradient(
                                        0, 0, 0, 1,
                                        [ //折线区域渐变
                                            {offset: 0, color: '#50a5fd'},
                                            {offset: 1, color: '#e8ecef'},

                                        ]
                                    )
                                }
                            }
                        },
                      // 如果有两条折线就再添加一个{}设置方法和上面都一样的,可以根据需求设置
                    ]
                };
                myChart.setOption(option); //将选项赋值给我们要展示的div
            },
   }

数据动态更新后,需重新调用这个函数,更新视图