echarts写折线图

//折线图
require("echarts/lib/chart/lines");
  initData2() {
      // 基于准备好的dom,初始化echarts实例
      var myChart2 = echarts.init(document.getElementById("myChart2"));
    
      // 绘制图表
      myChart2.setOption({
        //提示框
        tooltip: {
          trigger: "axis",
          position: "top",
          axisPointer: {
            type: "cross",
            label: {
              backgroundColor: "#6a7985"
            }
          }
        },
        //x轴
        xAxis: [
          {
            type: "category",
            //坐标轴两边留白策略,即x轴坐标点开始与结束点位置都不在最边缘
            boundaryGap: true,
            axisLine: {
              show: true,
              //x轴线样式
              lineStyle: {
                color: "#ccc",
                width: 1,
                type: "solid"
              }
            },
              //刻度显示
            axisTick: {
              show: false
            },
            //x轴字体设置
            axisLabel: {
              show: true,
              fontSize: 14,
              color: "#999"
            },
            data: [
              "01月",
              "02月",
              "03月",
              "04月",
              "05月",
              "06月",
              "07月",
              "08月",
              "09月",
              "10月",
              "11月",
              "12月"
            ]
          }
        ],

        yAxis: [
          {
            type: "value",
            //y轴字体设置
            axisLabel: {
              show: true,
              color: "#999",
              fontSize: 14
            },
            //刻度显示
            axisTick: {
              show: false
            },
            //y轴线设置不显示
            axisLine: {
              show: false
            },
            //与x轴平行的线样式
            splitLine: {
              show: true,
              lineStyle: {
                color: "#ccc",
                width: 1,
                type: "solid"
              }
            }
          }
        ],
        series: [
          {
            type: "line",
            //折线平滑
            smooth: true,
            symbol: "circle",
            symbolSize: 6,
            //线条样式
            lineStyle: {
              type: "linear",
              color: "#40c4f4",
              width: 2,
              type: "solid"
            },
            //折线连接点样式
            itemStyle: {
              color: "#40c4f4"
            },

            data: [820, 932, 901, 934, 1290, 1330, 1320]
          }
        ]
      });
      window.addEventListener("resize", function() {
        myChart2.resize();
      });
    }
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值