echarts 空心点曲线图

南桥几经秋_

于 2024-01-22 09:39:18 发布

阅读量507

点赞数 11

分类专栏： echarts相关案例记录文章标签： echarts 前端 javascript

本文链接：https://blog.csdn.net/qq_41615201/article/details/135740395

版权

echarts相关案例记录专栏收录该内容

10 篇文章 0 订阅

订阅专栏

这段代码演示如何用ECharts在网页上构建一个动态的折线图，展示11月每日数据，用于可视化分析。

摘要由CSDN通过智能技术生成

效果

在这里插入图片描述

代码

let xdata = [
        '11.17',
        '11.18',
        '11.19',
        '11.20',
        '11.21',
        '11.22',
        '11.23',
        '11.24',
        '11.25',
        '11.26'
      ]
let data = [
        '1',
        '2',
        '3',
        '6',
        '6',
        '4',
        '6',
        '8',
        '5',
        '7'
      ]
return {
    backgroundColor: '#140a69',
    grid: {
      left: '5%',
      right: '10%',
      top: '20%',
      bottom: '15%',
      containLabel: true
    },
    tooltip: {
      trigger: 'axis',
      backgroundColor: 'rgba(69, 14, 255,0.5)',
      borderWidth: '0',
      textStyle: {
        color: '#6DFFFF'
      },
      axisPointer: {
        type: 'cross',
        label: {
          backgroundColor: 'rgba(14, 95, 255, 0.6)'
        }
      }
    },
    xAxis: [
      {
        type: 'category',
        boundaryGap: false,
        axisLabel: {
          color: 'rgba(255, 255, 255, 0.15)',
          show: true
        },
        axisLine: {
          show: false
        },
        splitLine: {
          show: true,
          lineStyle: {
            color: 'rgba(255, 255, 255, 0.15)'
          }
        },
        data: xdata
      }
    ],
    yAxis: [
      {
        show: false,
        type: 'value',
        axisLine: {
          lineStyle: {
            color: '#27b4c2'
          }
        },
        splitLine: {
          show: true,
          lineStyle: {
            color: '#11366e'
          }
        }
      }
    ],
    series: [
      {
        smooth: true, // 是否平滑
        type: 'line',
        stack: '总量',
        symbol: 'circle',
        symbolSize: 8,
        itemStyle: {
          normal: {
            color: '#140a69',
            borderColor: '#16CEB9',
            borderWidth: 1,
            lineStyle: {
              color: '#16CEB9',
              width: 1
            }
          }
        },
        data
      }
    ]
  }