Echarts图表使用

m0_57558339

已于 2024-12-22 16:30:54 修改

阅读量756

点赞数 8

文章标签： echarts 前端 javascript

于 2024-12-21 01:24:54 首次发布

本文链接：https://blog.csdn.net/m0_57558339/article/details/144622426

版权

3.关键（引入echarts.min.js）

4.修改数据接口

前言

在爬取数据后需要使用图表展示数据，在前端网页展示数据时候可以使用ECharts

一、找到理想的图表

ECharts网址Apache EChartsApache ECharts, a powerful, interactive charting and visualization library for browserhttps://echarts.apache.org/

二、使用步骤

1.编辑图表

左侧是图表的js代码，可以自己编辑图表。

如果不会写js，那就一个个试，看删除了左侧代码的右侧图标会少什么内容，就知道js中元素对应图表中的什么语元素。

或者将左侧代码折叠，就可以清楚的看出js代码中有哪些元素，根据命名推测对应图表中的什么元素。

2.嵌入HTML

添加在<body></body>

<body>
    <h2 style="text-align: center;">这是一个图表</h2>
    <div class="chart" id="chart_demo" style="width: 100%; height: 400px;"></div>
</body>

添加在<header></header>

    <script>
        function chart_show() {
            var my_echarts = echarts.init(document.getElementById("chart_demo"));
            var option = {}//{}内容替换为ECharts代码，也就是步骤一中编辑js代码
            my_echarts.setOption(option);
        }

        // 页面加载时自动渲染图表
        window.onload = function () {
            chart_show();
        }
    </script>

<!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@5.3.2/dist/echarts.min.js"></script>
    <script>
        function chart_show() {
            var my_echarts = echarts.init(document.getElementById("chart_demo"));
            var option = {
                title: {
                    text: 'Temperature Change in the Coming Week'
                },
                tooltip: {
                    trigger: 'axis'
                },
                legend: {},
                toolbox: {
                    show: true,
                    feature: {
                        dataZoom: {
                            yAxisIndex: 'none'
                        },
                        dataView: { readOnly: false },
                        magicType: { type: ['line', 'bar'] },
                        restore: {},
                        saveAsImage: {}
                    }
                },
                xAxis: {
                    type: 'category',
                    boundaryGap: false,
                    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
                },
                yAxis: {
                    type: 'value',
                    axisLabel: {
                        formatter: '{value} °C'
                    }
                },
                series: [
                    {
                        name: 'Highest',
                        type: 'line',
                        data: [10, 11, 13, 11, 12, 12, 9],
                        markPoint: {
                            data: [
                                { type: 'max', name: 'Max' },
                                { type: 'min', name: 'Min' }
                            ]
                        },
                        markLine: {
                            data: [{ type: 'average', name: 'Avg' }]
                        }
                    },
                    {
                        name: 'Lowest',
                        type: 'line',
                        data: [1, -2, 2, 5, 3, 2, 0],
                        markPoint: {
                            data: [{ name: '周最低', value: -2, xAxis: 1, yAxis: -1.5 }]
                        },
                        markLine: {
                            data: [
                                { type: 'average', name: 'Avg' },
                                [
                                    {
                                        symbol: 'none',
                                        x: '90%',
                                        yAxis: 'max'
                                    },
                                    {
                                        symbol: 'circle',
                                        label: {
                                            position: 'start',
                                            formatter: 'Max'
                                        },
                                        type: 'max',
                                        name: '最高点'
                                    }
                                ]
                            ]
                        }
                    }
                ]
            };
            my_echarts.setOption(option);
        }

        // 页面加载时自动渲染图表
        window.onload = function () {
            chart_show();
        }
    </script>
</head>

<body>
    <h2 style="text-align: center;">这是一个图表</h2>
    <div class="chart" id="chart_demo" style="width: 100%; height: 400px;"></div>
</body>

</html>

3.关键（引入echarts.min.js）

如果不引入echarts.min.js，无法渲染图表，步骤2中已经引入。

方法一，CDN引入，国内可能无法访问

  <script src="https://cdn.jsdelivr.net/npm/echarts@5.3.2/dist/echarts.min.js"></script>

方法二，本地引入

下载 - Apache ECharts

<script src="js/echarts.min.js"></script>

4.修改数据接口

修改数据接口，更新表中的数据，data可以由fetch获取

data = {
  x: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'], // 横坐标数据
  y: [10, 11, 13, 11, 12, 12, 9] // 纵坐标数据
};
option = {
  title: {
    text: 'Temperature Change in the Coming Week'
  },
  tooltip: {
    trigger: 'axis'
  },
  legend: {},
  toolbox: {
    show: true,
    feature: {
      dataZoom: {
        yAxisIndex: 'none'
      },
      dataView: { readOnly: false },
      magicType: { type: ['line', 'bar'] },
      restore: {},
      saveAsImage: {}
    }
  },
  xAxis: {
    type: 'category',
    boundaryGap: false,
    data: data['x']
  },
  yAxis: {
    type: 'value',
    axisLabel: {
      formatter: '{value} °C'
    }
  },
  series: [
    {
      name: 'Highest',
      type: 'line',
      data:data['y'],
      markPoint: {
        data: [
          { type: 'max', name: 'Max' },
          { type: 'min', name: 'Min' }
        ]
      },
      markLine: {
        data: [{ type: 'average', name: 'Avg' }]
      }
    },
    {
      name: 'Lowest',
      type: 'line',
      data: [1, -2, 2, 5, 3, 2, 0],
      markPoint: {
        data: [{ name: '周最低', value: -2, xAxis: 1, yAxis: -1.5 }]
      },
      markLine: {
        data: [
          { type: 'average', name: 'Avg' },
          [
            {
              symbol: 'none',
              x: '90%',
              yAxis: 'max'
            },
            {
              symbol: 'circle',
              label: {
                position: 'start',
                formatter: 'Max'
              },
              type: 'max',
              name: '最高点'
            }
          ]
        ]
      }
    }
  ]
};