【echarts】用js与echarts数据图表化，折线图、折线图堆叠、柱状图、折柱混合、环形图

echarts

是一个基于 JavaScript 的开源可视化库，用于构建交互式和自定义的图表，使数据更加直观和易于理解，由百度开发并于2018年捐赠给 Apache 软件基金会，后来改名为Apache ECharts

类似的还有Chart.js

Chart.js地址：Chart.js 中文网

基础折线图

效果图：

源码：

<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="utf-8">
  <title>Basic Line Chart - Apache ECharts Demo</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }

    #chart-container {
      position: relative;
      height: 100vh;
      overflow: hidden;
    }
  </style>
</head>

<body>
  <div id="chart-container"></div>
  <script src="https://fastly.jsdelivr.net/npm/echarts@5.4.3/dist/echarts.min.js"></script>
  <script>
    var dom = document.getElementById('chart-container');
    // init 方法来初始化一个图表实例 myChart
    // 第一个参数 dom 是指定图表容器的 DOM 元素
    // 第二个参数 null 是可选的，表示指定的主题名称。这里传入 null 表示不使用任何主题，将使用默认主题
    // 第三个参数是一个配置对象，用于提供额外的配置选项
    var myChart = echarts.init(dom, null, {
      renderer: 'canvas',
      useDirtyRect: false
    });
    var app = {};

    var option;

    option = {
      // x 轴 类型与数据
      xAxis: {
        type: 'category',
        data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
        name: '星期'
      },
      // y 轴 类型与数据
      yAxis: {
        type: 'value',
        name: '开销，单位元'
      },
      series: [
        {
          // 存放着对应 x 轴类目的数值数据，依次是周一到周日的数值
          data: [50, 60, 44, 50, 43, 75, 120],
          // 表示该系列使用折线图进行展示
          type: 'line',
          // smooth: true 表示启用平滑曲线
          // smooth:true
        }
      ]
    };

    if (option && typeof option === 'object') {
      // 将配置应用到图表实例
      myChart.setOption(option);
    }
    // 监听窗口的 resize 事件，实现了图表在窗口大小变化时的自适应调整
    window.addEventListener('resize', myChart.resize);
  </script>
</body>

</html>

折线图堆叠

效果图：

源码：

<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="utf-8">
  <title>Basic Line Chart - Apache ECharts Demo</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }

    #chart-container {
      position: relative;
      height: 100vh;
      overflow: hidden;
    }
  </style>
</head>

<body>
  <div id="chart-container"></div>
  <script src="https://fastly.jsdelivr.net/npm/echarts@5.4.3/dist/echarts.min.js"></script>
  <script>
    var dom = document.getElementById('chart-container');
    // init 方法来初始化一个图表实例 myChart
    // 第一个参数 dom 是指定图表容器的 DOM 元素
    // 第二个参数 null 是可选的，表示指定的主题名称。这里传入 null 表示不使用任何主题，将使用默认主题
    // 第三个参数是一个配置对象，用于提供额外的配置选项
    var myChart = echarts.init(dom, null, {
      renderer: 'canvas',
      useDirtyRect: false
    });
    var app = {};

    var option;

    option = {
      // 设置标题 
      title: {
        text: '小周的遐想工资'
      },
      // 表示鼠标悬停在数据点上时显示提示框
      tooltip: {
        trigger: 'axis'
      },
      grid: {
        // 设置了图表的内边距
        left: '5%',
        right: '5%',
        bottom: '5%',
        // 坐标轴标签显示在内部，以免被裁剪
        containLabel: true
      },
      // toolbox 属性定义了图表的工具箱
      toolbox: {
        feature: {
          // saveAsImage，它表示将图表保存为图片的功能
          saveAsImage: {}
        }
      },
      xAxis: {
        type: 'category',
        // 表示数据从两个刻度之间开始绘制，而不是从刻度上开始
        boundaryGap: false,
        data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
        name: '星期'
      },
      yAxis: {
        type: 'value',
        name: '日薪'
      },
      series: [
        {
          name: '一年',
          type: 'line',
          data: [300, 300, 300, 300, 300, 600, 600]
        },
        {
          name: '两年',
          type: 'line',
          data: [380, 380, 380, 380, 380, 700, 700]
        },
        {
          name: '三年',
          type: 'line',
          data: [480, 480, 480, 480, 480, 800, 800]
        },
        {
          name: '四年',
          type: 'line',
          data: [550, 550, 550, 550, 550, 900, 900]
        },
        {
          name: '五年',
          type: 'line',
          data: [680, 680, 680, 680, 680, 1000, 1000]
        }
      ]
    };

    if (option && typeof option === 'object') {
      // 将配置应用到图表实例
      myChart.setOption(option);
    }
    // 监听窗口的 resize 事件，实现了图表在窗口大小变化时的自适应调整
    window.addEventListener('resize', myChart.resize);
  </script>
</body>

</html>

基础柱状图

效果图：

代码：

<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="utf-8">
  <title>Basic Line Chart - Apache ECharts Demo</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }

    #chart-container {
      position: relative;
      height: 100vh;
      overflow: hidden;
    }
  </style>
</head>

<body>
  <div id="chart-container"></div>
  <script src="https://fastly.jsdelivr.net/npm/echarts@5.4.3/dist/echarts.min.js"></script>
  <script>
    var dom = document.getElementById('chart-container');
    // init 方法来初始化一个图表实例 myChart
    // 第一个参数 dom 是指定图表容器的 DOM 元素
    // 第二个参数 null 是可选的，表示指定的主题名称。这里传入 null 表示不使用任何主题，将使用默认主题
    // 第三个参数是一个配置对象，用于提供额外的配置选项
    var myChart = echarts.init(dom, null, {
      renderer: 'canvas',
      useDirtyRect: false
    });
    var app = {};

    var option;

    option = {
      xAxis: {
        type: 'category',
        data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
        name: "星期"
      },
      yAxis: {
        type: 'value',
        name: "开销"
      },
      series: [
        {
          //  数组中存放了对应 x 轴类目的数值数据
          data: [
            80,
            {
              value: 100,
              // itemStyle 属性指定了该数据点的颜色为 '#a90000'
              itemStyle: {
                color: '#a90000'
              }
            },
            90,
            55,
            70,
            140,
            130
          ],
          // 表示该系列使用柱状图进行展示
          type: 'bar',
          // 表示显示柱状图的背景。默认情况下，背景是透明的
          showBackground: true,
          // 定义了柱状图的背景样式
          backgroundStyle: {
            color: 'rgba(180, 180, 180, 0.2)'
          }
        }
      ]
    };

    if (option && typeof option === 'object') {
      // 将配置应用到图表实例
      myChart.setOption(option);
    }
    // 监听窗口的 resize 事件，实现了图表在窗口大小变化时的自适应调整
    window.addEventListener('resize', myChart.resize);
  </script>
</body>

</html>

折柱混合

效果图：

源代码：

<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="utf-8">
  <title>Basic Line Chart - Apache ECharts Demo</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }

    #chart-container {
      position: relative;
      height: 100vh;
      overflow: hidden;
    }
  </style>
</head>

<body>
  <div id="chart-container"></div>
  <script src="https://cdn.jsdelivr.net/npm/echarts@5.4.3/dist/echarts.min.js"></script>
  <script>
    var dom = document.getElementById('chart-container');
    // init 方法来初始化一个图表实例 myChart
    // 第一个参数 dom 是指定图表容器的 DOM 元素
    // 第二个参数 null 是可选的，表示指定的主题名称。这里传入 null 表示不使用任何主题，将使用默认主题
    // 第三个参数是一个配置对象，用于提供额外的配置选项
    var myChart = echarts.init(dom, null, {
      renderer: 'canvas',
      useDirtyRect: false
    });
    var app = {};

    var option;

    option = {
      // 定义了鼠标悬停在图表上时显示的提示框
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          type: 'cross',
          crossStyle: {
            color: '#999'
          }
        }
      },
      // toolbox 属性定义了工具栏
      toolbox: {
        feature: {
          //  表示可以查看数据视图
          dataView: { show: true, readOnly: false },
          // magicType 表示可以切换不同的图表类型，包括线图和柱状图
          magicType: { show: true, type: ['line', 'bar'] },
          // 表示可以还原图表的初始状态
          restore: { show: true },
          // 表示可以保存图表为图片
          saveAsImage: { show: true }
        }
      },
      xAxis: [
        {
          type: 'category',
          data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
          axisPointer: {
            type: 'shadow'
          },
          name: "星期"
        }
      ],
      yAxis: [
        {
          type: 'value',
          name: '降水量',
          min: 0,
          max: 500,
          // 表示刻度间隔
          interval: 50,
          // 定义了坐标轴刻度上的文本显示格式
          axisLabel: {
            formatter: '{value} ml'
          }
        },
        {
          type: 'value',
          name: '温度',
          min: 0,
          max: 50,
          // 表示刻度间隔
          interval: 5,
          // 定义了坐标轴刻度上的文本显示格式
          axisLabel: {
            formatter: '{value} °C'
          }
        }
      ],
      series: [
        {
          name: '蒸发量',
          type: 'bar',
          tooltip: {
            // 定义了数值的格式化函数，分别将数值加上单位
            valueFormatter: function (value) {
              return value + ' ml';
            }
          },
          data: [
            2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3
          ]
        },
        {
          name: '降水量',
          type: 'bar',
          tooltip: {
            valueFormatter: function (value) {
              return value + ' ml';
            }
          },
          data: [
            2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3
          ]
        },
        {
          name: '温度',
          type: 'line',
          // 将某个系列数据与第二个 Y 轴关联起来，使该系列在第二个 Y 轴上显示
          yAxisIndex: 1,
          tooltip: {
            valueFormatter: function (value) {
              return value + ' °C';
            }
          },
          data: [2.0, 2.2, 3.3, 4.5, 6.3, 10.2, 20.3, 23.4, 23.0, 16.5, 12.0, 6.2]
        }
      ]
    };

    if (option && typeof option === 'object') {
      // 将配置应用到图表实例
      myChart.setOption(option);
    }
    // 监听窗口的 resize 事件，实现了图表在窗口大小变化时的自适应调整
    window.addEventListener('resize', myChart.resize);
  </script>
</body>

</html>

环形图

效果图：

源代码：

<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="utf-8">
  <title>Basic Line Chart - Apache ECharts Demo</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }

    #chart-container {
      position: relative;
      height: 100vh;
      overflow: hidden;
    }
  </style>
</head>

<body>
  <div id="chart-container"></div>
  <script src="./echarts.min.js"></script>
  <script>
    var dom = document.getElementById('chart-container');
    // init 方法来初始化一个图表实例 myChart
    // 第一个参数 dom 是指定图表容器的 DOM 元素
    // 第二个参数 null 是可选的，表示指定的主题名称。这里传入 null 表示不使用任何主题，将使用默认主题
    // 第三个参数是一个配置对象，用于提供额外的配置选项
    var myChart = echarts.init(dom, null, {
      renderer: 'canvas',
      useDirtyRect: false
    });
    var app = {};

    var option;

    option = {
      // 鼠标悬停在饼图扇区上时显示的提示框
      tooltip: {
        trigger: 'item'
      },
      legend: {
        top: '5%',
        left: 'center'
      },
      series: [
        {
          name: '饼图',
          type: 'pie',
          // 设置内外半径，即饼图的大小。内半径为 40%，外半径为 70%
          radius: ['40%', '70%'],
          // 不允许标签重叠
          avoidLabelOverlap: false,
          label: {
            position: 'outside',  // 设置标签位置为饼图对应的侧边
            fontSize: 12,  // 可选：调整标签字体大小
            fontWeight: 'bold'  // 可选：调整标签字体粗细
          },
          emphasis: {
            // 提示文本的样式配置
            label: {
              show: true,
              fontSize: 14,
              fontWeight: 'bold'
            }
          },
          labelLine: {
            show: false
          },
          data: [
            { value: 500, name: '周一的工作量' },
            { value: 60, name: '周二的工作量' },
            { value: 10, name: '周三的工作量' },
            { value: 410, name: '周四的工作量' },
            { value: 200, name: '周五的工作量' }
          ]
        }
      ]
    };

    if (option && typeof option === 'object') {
      // 将配置应用到图表实例
      myChart.setOption(option);
    }
    // 监听窗口的 resize 事件，实现了图表在窗口大小变化时的自适应调整
    window.addEventListener('resize', myChart.resize);
  </script>
</body>

</html>