ECharts 折线图实线加虚线圆角过渡

奇怪的芝士

已于 2024-04-19 10:00:10 修改

阅读量418

点赞数 3

文章标签： echarts 前端 javascript

于 2024-04-18 14:45:02 首次发布

本文链接：https://blog.csdn.net/qq_53702986/article/details/137921081

版权

之前项目中写的一个例子, 示例中用的CDN引用, 直接复制粘贴代码就能运行

效果图:

代码:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title></title>
  <script src="https://cdn.jsdelivr.net/npm/echarts@5.5.0/dist/echarts.min.js" type="text/javascript" charset="utf-8"></script>
  <style type="text/css">
    html,
    body {
      width: 100%;
      height: 100%;
      margin: 0;
      padding: 0;
    }
  </style>
</head>
<body>
<div id="myChart" style="width: 100%; height: 100%; overflow: hidden;"></div>
<script type="text/javascript">
  let chartData = [
    {
      "name": "葡萄",
      "list": [
        {"value": 66.22, "year": 2020},
        {"value": 64.13, "year": 2021},
        {"value": 73.98, "year": 2022},
        {"value": 72.27, "year": 2023},
        {"value": 80.23, "year": 2024}
      ]
    },
    {
      "name": "苹果",
      "list": [
        {"value": 62.43, "year": 2020},
        {"value": 59.08, "year": 2021},
        {"value": 56.78, "year": 2022},
        {"value": 58.53, "year": 2023},
        {"value": 58.97, "year": 2024}
      ]
    },
    {
      "name": "香蕉",
      "list": [
        {"value": 50.07, "year": 2020},
        {"value": 47.29, "year": 2021},
        {"value": 47.64, "year": 2022},
        {"value": 49.96, "year": 2023},
        {"value": 52.54, "year": 2024}
      ]
    },
    {
      "name": "樱桃",
      "list": [
        {"value": 25.04, "year": 2020},
        {"value": 30.85, "year": 2021},
        {"value": 35.41, "year": 2022},
        {"value": 32.98, "year": 2023},
        {"value": 36.32, "year": 2024}
      ]
    },
    {
      "name": "蓝莓",
      "list": [
        {"value": 38.82, "year": 2020},
        {"value": 38.09, "year": 2021},
        {"value": 41.16, "year": 2022},
        {"value": 42.33, "year": 2023},
        {"value": 41.99, "year": 2024}
      ]
    }
  ] // 图表数据

  let names = chartData.map(v => v.name)
  let axisLabel = []
  let data = {}
  chartData.forEach((v, i) => {
    axisLabel = v.list.map(v => v.year)
    data[names[i]] = v.list.map(v => v.value || 0)
  })

  let dashedLength = 1 // 虚线长度（区间数）
  let solidLength = axisLabel.length - dashedLength - 1 // 实线长度（区间数）
  let colors = ['#796de8', '#9fe6b8', '#fac858', "#ee6666", "#73c0de"]
  let numColorObj = {}
  colors.forEach((v, i) => {
    numColorObj['name' + i] = {
      color: v,
      fontSize: 14
    }
    numColorObj['num' + i] = {
      color: v,
      fontSize: 14
    }
  })

  let option = {
    backgroundColor: 'rgba(11, 51, 126, 0.8)',
    tooltip: {
      trigger: 'axis',
      formatter: params => {
        let filterList = params.filter((v, i) => i % 2 === 0)
        let name = filterList[0].name
        let tipBox = ''
        filterList.forEach((v, i) => {
          tipBox += `<span style="display:inline-block;margin-right:4px;border-radius:10px;width:10px;height:10px;background-color:${colors[i]};"></span>` + v.seriesName + ': ' + v.value + '<br/>'
        })
        return name + '<br/>' + tipBox
      },
      backgroundColor: '#133d7e',
      axisPointer: {
        lineStyle: {
          color: '#7ec7ff'
        },
      },
      borderWidth: 0,
      textStyle: {
        color: "#fff"
      },
      confine: true,
    },
    legend: {
      // right: '5%',
      left: 'center',
      top: '6%',
      textStyle: {
        color: '#ffffff',
        fontSize: 16
      },
      icon: 'rect',
      itemGap: 25,
      itemWidth: 16,
      itemHeight: 12,
    },
    grid: {
      top: '17%',
      left: '5%',
      right: '15%',
      bottom: '4%',
      containLabel: true
    },
    xAxis: {
      type: 'category',
      boundaryGap: false,
      axisLine: {
        show: false,
        lineStyle: {
          color: "#4d538d",
          width: 4
        },
      },
      axisLabel: {
        interval: 0,
        margin: 20,
        textStyle: {
          color: '#C5E4FE',
          fontSize: 16
        }
      },
      splitLine: {
        show: false,
        lineStyle: {
          color: 'rgba(27, 179, 245, 0.4)',
        },
      },
      axisTick: {
        show: false,
      },
      data: axisLabel
    },
    yAxis: {
      splitLine: {
        show: true,
        lineStyle: {
          color: 'rgba(27, 179, 245, 0.4)',
        },
      },
      axisLine: {
        show: false,
        lineStyle: {
          color: "#4d538d",
          width: 4
        }
      },
      axisLabel: {
        margin: 20,
        textStyle: {
          color: '#C5E4FE',
          fontSize: 16
        }
      },
      axisTick: {
        show: false,
      },
    },
    visualMap: [],
    series: [],
    dataZoom: [
      {
        type: 'inside',
        show: false,
        start: 0,
        end: 100,
        yAxisIndex: [0]
      }
    ], // 缩放功能
  }

  names.forEach((v, i) => {
    option.visualMap.push({
        show: false,
        dimension: 0,
        seriesIndex: 2 * i,
        pieces: [
          {
            gte: 0,
            lte: solidLength,
            color: colors[i],
          },
          {
            gt: solidLength,
            lte: 100,
            color: '#0000'
          }
        ]
      },
      {
        show: false,
        dimension: 0,
        seriesIndex: 2 * i + 1,
        pieces: [
          {
            gte: 0,
            lte: solidLength,
            color: '#0000'
          },
          {
            gt: solidLength,
            color: colors[i]
          }
        ]
      })
    option.series.push({
        name: v,
        type: 'line',
        smooth: true,
        showAllSymbol: false,
        symbolSize: 0,
        data: data[v],
      },
      {
        name: v,
        type: 'line',
        smooth: true,
        showAllSymbol: false,
        symbolSize: 0,
        itemStyle: {
          normal: {
            lineStyle: {
              width: 2,
              type: 'dotted',
            },
          },
        },
        label: {
          show: true,
          position: 'right',
          color: '#fff',
          fontSize: 14,
          formatter: params => {
            if (params.dataIndex === axisLabel.length - 1) {
              let name = params.seriesName
              let index = names.findIndex(v => v === name)
              return `{name${index}|${name}} {num${index}|${params.value}}`
            } else {
              return ''
            }
          },
          rich: numColorObj,
        },
        data: data[v],
      })
  })

  let myChart = echarts.init(document.getElementById('myChart'))
  myChart.setOption(option, true)
</script>
</body>
</html>