【vue2】使用echarts展示平滑折线图

最新推荐文章于 2024-01-18 15:59:18 发布

九点准时睡

最新推荐文章于 2024-01-18 15:59:18 发布

阅读量634

点赞数 1

分类专栏： Vue2 文章标签： echarts javascript ecmascript vue elementui

本文链接：https://blog.csdn.net/qq_44971635/article/details/130112020

版权

Vue2 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

步骤一：布局设置宽高

<div id="orderline" style="width:400px;height:400px"></div>

步骤二：获取DOM

mounted(){
    this.getOrderLine()
}
methods:{
    getOrderLine() {
      let myChart = this.$echarts.init(document.getElementById('orderline'))
      myChart.setOption(
        {
          xAxis: {
            type: 'category',
            data: ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月'],
            boundaryGap: false,
            nameTextStyle: {
              color: '#fff',
            },
            axisTick: {
              show: false,
            },
            axisLine: {
              show: true,
              lineStyle: {
                color: '#66FFFF',
                type: "solid",//设置坐标轴为实线
              },
            },
            axisLabel: {
              interval: 0,
              textStyle: {
                color: '#ccc',
                fontSize: '12',
              },
            },
          },
          yAxis: {
            type: 'value',
            splitLine: {
              lineStyle: {
                type: 'dashed',//设置刻度线条为虚线
                width: 1,
                color: 'rgba(255,255,255,0.1)'
              },
              show: true,
            },
            axisLine: {
              show: false,
            },
            axisTick: {
              show: false,
            },
            axisLabel: {
              interval: 0,
              textStyle: {
                color: 'rgba(255, 255, 255, 1)',
                fontSize: '12',
              },
            },
          },

          lineStyle: {
            color: {
              //设置线条渐变
              colorStops: [
                {
                  offset: 0,
                  color: '#0E5FFF',
                },
                {
                  offset: 0.5,
                  color: '#00F2EF',
                },
                {
                  offset: 1,
                  color: '#0E5FFF',
                },
              ],
            },
          },
          series: [
            {
              symbol: 'none',
              data: [
                202, 250, 100, 300, 280, 600, 300, 250, 180, 500, 400, 260,
              ],
              type: 'line',
              smooth: true,
            },
          ],
        },
        true
      )
    },
}