关于echarts的初步用法和示例

万古仙帝懒大王2023-11-01 11:03

echarts

全局 echarts 对象，在 script 标签引入 echarts.js 文件后获得，或者在 AMD 环境中通过 require('echarts') 获得。

快速上手

获取 Apache ECharts

在 www.jsdelivr.com/package/npm... 选择 dist/echarts.js，点击并保存为 echarts.js 文件。

引入 Apache ECharts

在刚才保存 echarts.js 的目录新建一个 index.html 文件，内容如下：

xml 复制代码 
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <!-- 引入刚刚下载的 ECharts 文件 -->
    <script src="echarts.js"></script>
  </head>
</html>

打开这个 index.html，你会看到一片空白。但是不要担心，打开控制台确认没有报错信息，就可以进行下一步。

绘制一个简单的图表

在绘图前我们需要为 ECharts 准备一个定义了高宽的 DOM 容器。在刚才的例子 </head> 之后，添加：

xml 复制代码 
<body>
  <!-- 为 ECharts 准备一个定义了宽高的 DOM -->
  <div id="main" style="width: 600px;height:400px;"></div>
</body>

然后就可以通过 echarts.init 方法初始化一个 echarts 实例并通过 setOption 方法生成一个简单的柱状图，下面是完整代码。

xml 复制代码 
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>ECharts</title>
    <!-- 引入刚刚下载的 ECharts 文件 -->
    <script src="echarts.js"></script>
  </head>
  <body>
    <!-- 为 ECharts 准备一个定义了宽高的 DOM -->
    <div id="main" style="width: 600px;height:400px;"></div>
    <script type="text/javascript">
      // 基于准备好的dom，初始化echarts实例
      var myChart = echarts.init(document.getElementById('main'));

      // 指定图表的配置项和数据
      var option = {
        title: {
          text: 'ECharts 入门示例'
        },
        tooltip: {},
        legend: {
          data: ['销量']
        },
        xAxis: {
          data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
        },
        yAxis: {},
        series: [
          {
            name: '销量',
            type: 'bar',
            data: [5, 20, 36, 10, 10, 20]
          }
        ]
      };

      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option);
    </script>
  </body>
</html>

初始化

在 HTML 中定义有宽度和高度的父容器

通常来说，需要在 HTML 中先定义一个 <div> 节点，并且通过 CSS 使得该节点具有宽度和高度。初始化的时候，传入该节点，图表的大小默认即为该节点的大小，除非声明了 opts.width 或 opts.height 将其覆盖。

ini 复制代码 
<div id="main" style="width: 600px;height:400px;"></div>
<script type="text/javascript">
  var myChart = echarts.init(document.getElementById('main'));
</script>

注意:使用这种方法在调用 echarts.init 时需保证容器已经有宽度和高度

指定图表的大小

如果图表容器不存在宽度和高度，或者，你希望图表宽度和高度不等于容器大小，也可以在初始化的时候指定大小。

xml 复制代码 
<div id="main"></div>
<script type="text/javascript">
  var myChart = echarts.init(document.getElementById('main'), null, {
    width: 600,
    height: 400
  });
</script>

数据集

数据集（dataset）是专门用来管理数据的组件。虽然每个系列都可以在 series.data 中设置数据，但是从 ECharts4 支持数据集开始，更推荐使用数据集来管理数据。因为这样，数据可以被多个组件复用，也方便进行 "数据和其他配置" 分离的配置风格。毕竟，在运行时，数据是最常改变的，而其他配置大多并不会改变。

在系列中设置数据

如果数据设置在 系列（series） 中，例如：

css 复制代码 
option = {
  xAxis: {
    type: 'category',
    data: ['Matcha Latte', 'Milk Tea', 'Cheese Cocoa', 'Walnut Brownie']
  },
  yAxis: {},
  series: [
    {
      type: 'bar',
      name: '2015',
      data: [89.3, 92.1, 94.4, 85.4]
    },
    {
      type: 'bar',
      name: '2016',
      data: [95.8, 89.4, 91.2, 76.9]
    },
    {
      type: 'bar',
      name: '2017',
      data: [97.7, 83.1, 92.5, 78.1]
    }
  ]
};

下面是一个引入echarts的项目示例：

js 复制代码 
```<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>各省市天气信息</title>
    <link rel="stylesheet" href="./layui/css/layui.css">
    <style>
        label {
            line-height: 38px;
        }

        .label-city {
            text-align: end;
        }

        #echarts-box {
            width: 100%;
            height: 400px;
            margin-top: 100px;
        }
    </style>
</head>

<body>
    <!-- 操作栏区域：包含：城市选择、获取天气的按钮 -->
    <div class="layui-panel">
        <div style="padding: 32px;">
            <div class="layui-form layui-row layui-col-space16">
                <div class="layui-col-md2 label-city">
                    <label for="city-select">选择城市：</label>
                </div>
                <div class="layui-col-md4">
                    <select id="province" lay-filter="province-select-filter">

                    </select>
                </div>
                <div class="layui-col-md4">
                    <select id="city">

                    </select>
                </div>
                <div class="layui-col-md2">
                    <button id="get-weather" type="button" class="layui-btn">获取天气</button>
                </div>
            </div>
        </div>
    </div>


    <!-- 天气折线图显示区域 -->
    <div id="echarts-box"></div>

    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/echarts@5.4.3/dist/echarts.min.js"></script>
    <script src="./layui/layui.js"></script>
    <script>
        // 获取页面的button DOM元素
        var getWeatherBtn = $('#get-weather');
        // 获取页面的id="echarts-box"的元素
        var echartsBox = $('#echarts-box');
        // 获取页面的id="province"的元素
        var province = $('#province');
        // 获取页面的id="city"的元素
        var city = $('#city');

        // 初始化echarts的实例
        var myChart = echarts.init(echartsBox[0]);

        // 给getWeatherBtn绑定一个单击事件
        getWeatherBtn.on('click', function () {
            // 获取页面id为city-select元素的值
            var cityName = city.val();

            // 发送ajax请求，获取天气数据
            $.ajax({
                url: "https://api.oioweb.cn/api/weather/weather",
                type: "GET",
                data: {
                    "city_name": cityName
                },
                success: function (res) {
                    convertData(res.result.forecast_list);
                },
                error: function (err) {
                    console.log(err);
                }
            })
        });

        // 创建一个函数，作用：转化echarts图所需要的数据
        function convertData(data) {
            var dateArr = []  // 日期数组
            var lowTempArr = []  // 低温数组
            var highTempArr = []  // 高温数组

            console.log(data);

            for (var i = 0; i < data.length; i++) {
                dateArr.push(data[i].date.slice(5).replace('-', '月') + '日');
                lowTempArr.push(data[i].low_temperature);
                highTempArr.push(data[i].high_temperature);
            }

            renderLineChart(dateArr, lowTempArr, highTempArr);
        }

        // 创建一个函数，作用：动态渲染折线图
        function renderLineChart(dateArr, lowTempArr, highTempArr) {
            // 配置echarts折线图的数据
            var option = {
                title: {
                    text: city.val() + '天气信息',
                    left: 'center'
                },
                tooltip: {},
                xAxis: {
                    type: 'category',
                    data: dateArr
                },
                yAxis: {},
                series: [{
                    name: '最低温',
                    type: 'line',
                    data: lowTempArr,
                    color: ['skyblue']
                }, {
                    name: '最高温',
                    type: 'line',
                    data: highTempArr,
                    color: ['orange']
                }]

            };
            // 使用刚指定的配置项和数据显示图表。
            myChart.setOption(option);
        }

        // 创建一个函数，作用：ajax请求city.json文件，获取地域信息
        function getAreaInfo() {
            // 在本地缓存中读取全国省市数据
            var areaData = localStorage.getItem('area');

            if (areaData) {
                // 本地缓存中有全国省市数据
                var areaObj = JSON.parse(areaData);
                renderProvince(areaObj)

            } else {
                $.ajax({
                    url: "./city.json",
                    success: function (res) {
                        localStorage.setItem('area',JSON.stringify(res));
                        renderProvince(res)
                    },
                    error: function (err) {
                        console.log(err);
                    }
                })
            }


        }

        // 渲染省份数据
        function renderProvince(res) {
            // 获取省份的数据
            var provincekeys = Object.keys(res["00"]);
            var provinceValues = Object.values(res["00"]);
            var provinceOptions = '';
            for (var i = 0; i < provinceValues.length; i++) {
                provinceOptions += '<option value="' + provincekeys[i] + '">' + provinceValues[i] + '</option>'
            }
            province.html(provinceOptions);

            // 重新渲染select组件
            layui.use(function () {
                var form = layui.form;
                // 当表单元素被插入插入时，需进行组件渲染才能显示
                form.render('select'); // 仅渲染 select 元素
                renderCity(res, 1)

                // select 事件
                form.on('select(province-select-filter)', function (data) {
                    var value = data.value; // 获得被选中的值
                    renderCity(res, value);
                });
            })
        }

        // 根据选择的省份不同，渲染不同的市数据
        function renderCity(res, value) {
            var cityValues = Object.values(res[value]);
            var cityOptions = '';
            for (var i = 0; i < cityValues.length; i++) {
                cityOptions += '<option value="' + cityValues[i] + '">' + cityValues[i] + '</option>'
            }
            city.html(cityOptions);

            // 重新渲染select组件
            layui.use(function () {
                var form = layui.form;
                // 当表单元素被插入插入时，需进行组件渲染才能显示
                form.render('select'); // 仅渲染 select 元素
            })
        }

        getAreaInfo()
    </script>
</body>

</html>
相关推荐
秦jh_11 分钟前
【Linux】多线程（概念，控制）
linux·运维·前端
蜗牛快跑21324 分钟前
面向对象编程 vs 函数式编程
前端·函数式编程·面向对象编程
Dread_lxy25 分钟前
vue 依赖注入（Provide、Inject ）和混入（mixins）
前端·javascript·vue.js
涔溪1 小时前
Ecmascript（ES）标准
前端·elasticsearch·ecmascript
榴莲千丞1 小时前
第8章利用CSS制作导航菜单
前端·css
奔跑草-1 小时前
【前端】深入浅出 - TypeScript 的详细讲解
前端·javascript·react.js·typescript
羡与2 小时前
echarts-gl 3D柱状图配置
前端·javascript·echarts
guokanglun2 小时前
CSS样式实现3D效果
前端·css·3d
咔咔库奇2 小时前
ES6进阶知识一
前端·ecmascript·es6
渗透测试老鸟-九青2 小时前
通过投毒Bingbot索引挖掘必应中的存储型XSS
服务器·前端·javascript·安全·web安全·缓存·xss
热门推荐
01玄机平台应急响应—webshell查杀02【HarmonyOS】HUAWEI DevEco Studio 下载地址汇总03组基轨迹建模 GBTM的介绍与实现（Stata 或 R）04新版微信小程序获取用户手机号05全面解析：构建基于深度学习的安全帽检测系统（UI界面+YOLO代码+数据集）06Windows10安装PCL1.14.0及点云配准07【TC3xx芯片】TC3xx芯片电源管理系统PMS详解08Ubuntu 20.04使用Livox mid 360 测试 FAST_LIO09基于YOLOv10深度学习的CT扫描图像肾结石智能检测系统【python源码+Pyqt5界面+数据集+训练代码】深度学习实战、目标检测10【软件工程】UML用例图介绍和实例说明