echarts 折线的使用

这段代码展示了如何使用Echarts库初始化一个图表,包括设置网格、坐标轴、数据系列、提示框等详细配置,并实现了窗口大小改变时图表的自适应调整。主要涉及线图类型,包含两种数据系列,分别用不同颜色表示,同时应用了渐变填充效果。
摘要由CSDN通过智能技术生成
      // initmap(xdata, ydata1, ydata2) {
            //     let lineStyle2 = {};
            //     if (this.colorb == 2) {
            //         lineStyle2 = {
            //             color: '#454d65',
            //             // opacity: 0.1,
            //         }
            //     }
            //     // let label = ;
            //     let value = [90, 70, 88, 75, 88, 79, 80];
            //     let value2 = [60, 50, 68, 30, 35, 47, 66];

            //     var option = {
            //         // backgroundColor: '#101e44',
            //         grid: {
            //             top: 15,
            //             bottom: 0,
            //             left: 10,
            //             right: 10,
            //             containLabel: true,
            //         },
            //         tooltip: {
            //             trigger: 'axis',
            //             axisPointer: {
            //                 lineStyle: {
            //                     color: {
            //                         type: 'linear',
            //                         x: 0,
            //                         y: 0,
            //                         x2: 0,
            //                         y2: 1,
            //                         colorStops: [{
            //                                 offset: 0,
            //                                 color: 'rgba(255,255,255,0)', // 0% 处的颜色
            //                             },
            //                             {
            //                                 offset: 0.5,
            //                                 color: 'rgba(255,255,255,1)', // 100% 处的颜色
            //                             },
            //                             {
            //                                 offset: 1,
            //                                 color: 'rgba(255,255,255,0)', // 100% 处的颜色
            //                             },
            //                         ],
            //                         global: false, // 缺省为 false
            //                     },
            //                 },
            //             },
            //         },
            //         xAxis: {
            //             type: 'category',
            //             boundaryGap: false,
            //             axisLabel: { //文本标签
            //                 // formatter: '{value}',
            //                 fontSize: 10,
            //                 // margin: 20,
            //                 color: (value, index) => {
            //                     return this.colorb == 1 ? '#929294' : '#36e8f9'
            //                 },
            //                 textStyle: {
            //                     // color: '#858585',
            //                 },
            //                 rotate: 40
            //             },
            //             // axisLabel: {
            //             //     interval: 0,
            //             //     color: fcolor,
            //             //     fontSize: 13,
            //             // },
            //             axisTick: {
            //                 show: false,
            //             },
            //             axisLine: { //x轴
            //                 show: false,
            //                 lineStyle: {
            //                     // color: '#ececec'
            //                 }
            //             },
            //             data: ['08/23', '08/24', '08/25', '08/26', '08/27', '08/28', '08/29'],
            //         },
            //         yAxis: {
            //             // name:'%',
            //             splitLine: {
            //                 show: true,
            //                 lineStyle: lineStyle2
            //             },
            //             axisLabel: {
            //                 formatter: '{value}',
            //                 color: (value, index) => {
            //                     return this.colorb == 1 ? '#929294' : '#36e8f9'
            //                 }
            //             }
            //         },
            //         series: [
            //             {
            //                 name: '数据1',
            //                 type: 'line',
            //                 smooth: true,
            //                 showSymbol: true,
            //                 symbolSize: 4,
            //                 zlevel: 3,
            //                 itemStyle: {
            //                     color: '#2c99ff',
            //                     borderColor: '#2c99ff',
            //                 },
            //                 lineStyle: {
            //                     normal: {
            //                         width: 1,
            //                         color: '#2c99ff',
            //                     },
            //                 },
            //                 // areaStyle: {
            //                 //     normal: {
            //                 //         color: new echarts.graphic.LinearGradient(
            //                 //             0,
            //                 //             0,
            //                 //             0,
            //                 //             1,
            //                 //             [{
            //                 //                     offset: 0,
            //                 //                     color: 'rgba(46, 153, 255,0.9)',
            //                 //                 },
            //                 //                 {
            //                 //                     offset: 0.8,
            //                 //                     color: 'rgba(46, 153, 255,0)',
            //                 //                 },
            //                 //             ],
            //                 //             false
            //                 //         ),
            //                 //     },
            //                 // },
            //                 data: value,
            //             },
            //             {
            //                 name: '数据2',
            //                 type: 'line',
            //                 smooth: true,
            //                 showSymbol: true,
            //                 symbolSize: 4,
            //                 zlevel: 3,
            //                 itemStyle: {
            //                     color: '#ffa628',
            //                     borderColor: '#ffa628',
            //                 },
            //                 lineStyle: {
            //                     normal: {
            //                         width: 1,
            //                         color: '#ffa628',
            //                     },
            //                 },
            //                 areaStyle: {
            //                     normal: {
            //                         color: new echarts.graphic.LinearGradient(
            //                             0,
            //                             0,
            //                             0,
            //                             1,
            //                             [{
            //                                     offset: 0,
            //                                     color: 'rgba(255, 169, 41,0.9)',
            //                                 },
            //                                 {
            //                                     offset: 0.8,
            //                                     color: 'rgba(255, 169, 41,0)',
            //                                 },
            //                             ],
            //                             false
            //                         ),
            //                     },
            //                 },
            //                 data: value2,
            //             },
            //         ],
            //     };

            //     // 实现ecarths图的自适应
            //     window.addEventListener("resize", () => {
            //         if (this.mychart != null) {
            //             this.mychart.resize();
            //         }
            //     })

            //     this.mychart = echarts.init(document.getElementById('echarts_2'));
            //     this.mychart.setOption(option, true);
            // }
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值