【示功图使用echarts实现过程】

farewell-Calm

已于 2024-03-05 14:27:53 修改

阅读量622

点赞数 8

CC 4.0 BY-SA版权

分类专栏： echarts web可视化开发文章标签： echarts

于 2024-03-05 14:18:23 首次发布

本文链接：https://blog.csdn.net/weixin_43956070/article/details/136477360

web可视化开发同时被 2 个专栏收录

6 篇文章

订阅专栏

echarts

1 篇文章

订阅专栏

本文详细介绍了如何利用Echarts库在HTML中创建一个分所销售水量占比的示功图，包括数据点定义、图表配置和最终的代码实现过程。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

示功图使用echarts实现过程

1.代码实现过程

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/echarts@4.1.0/dist/echarts.min.js"></script>
  </head>
  <body>
    <div id="chart" style="width: 300px; height: 200px"></div>
    <script>
      // 获取图表容器
      let chartContainer = document.getElementById("chart");

      // 初始化Echarts图表对象
      let myChart = echarts.init(chartContainer);

      // 定义曲线数据点
      const dataPoints = [
        { x: 0, y: 0 }, // 起始点
        { x: 100, y: 80 },
        { x: 200, y: 70 },
        { x: 300, y: 90 },
        { x: 400, y: 80 }, // 结束点
      ];

      const sData = [];
      for (let i = 0; i < dataPoints.length; i++) {
        let point = dataPoints[i];
        sData.push([point.x, point.y]);
      }
      sData.push([dataPoints[0].x, dataPoints[0].y]);
      // 配置选项
      let option = {
        title:{
            text:'分所销售水量占比',
            top:'0',
            left:'center',
            textStyle:{
                color:'#000',
                align:'center',
                fontSize:12,
            }
        },
        tooltip: {
            trigger: 'axis',
            axisPointer: {
               
                lineStyle: {
                    width: 0
                }
            },
            backgroundColor: 'rgba(0,0,0,0.6)',
            textStyle: {
                color: '#fff'
            },
            padding: [10, 10],
            extraCssText: 'box-shadow: 1px 0 2px 0 rgba(163,163,163,0.5)'
        }, // 提示框组件
        legend: {}, // 图例组件
        grid: { left: "0", top: "20", bottom: "0", containLabel: true }, // 网格布局
        xAxis: {
          show: true,
          axisLine: {
            lineStyle: {
              color: "#DCE2E8",
            },
          },
          axisTick: {
            show: false,
          },
          axisLabel: {
            interval: 0,
            textStyle: {
              color: "#999",
            },
            fontSize: 12,
            margin: 5,
          },
        }, // X轴
        yAxis: {
          show: true,
          axisLine: {
            lineStyle: {
              color: "#DCE2E8",
            },
          },
          axisTick: {
            show: false,
          },
          axisLabel: {
            interval: 0,
            textStyle: {
              color: "#999",
            },
            fontSize: 12,
            margin: 5,
          },
        }, // Y轴
        series: [
          {
            type: "line",
            smooth: true, // 平滑曲线效果
            symbolSize: 0, // 不显示标记点
            lineStyle: { width: 1, color: "#FFA500" }, // 线条样式
            //itemStyle: { color: "#FFA500" }, // 项目样式（曲线颜色）
            data: sData,
          },
        ],
      };
      // 使用配置项生成图表
      myChart.setOption(option);
    </script>
  </body>
</html>