图标统计页面的设计与控件 Apache echarts

Apache ECharts

html 复制代码
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>ECharts</title>
    <!-- Include the ECharts file you just downloaded -->
    <script src="echarts.js"></script>
  </head>
  <body>
    <!-- Prepare a DOM with a defined width and height for ECharts -->
    <div id="main" style="width: 600px;height:400px;"></div>
    <script type="text/javascript">
      // Initialize the echarts instance based on the prepared dom
      var myChart = echarts.init(document.getElementById('main'));

      // Specify the configuration items and data for the chart
      var option = {
        title: {
          text: 'ECharts Getting Started Example'
        },
        tooltip: {},
        legend: {
          data: ['sales']
        },
        xAxis: {
          data: ['Shirts', 'Cardigans', 'Chiffons', 'Pants', 'Heels', 'Socks']
        },
        yAxis: {},
        series: [
          {
            name: 'sales',
            type: 'bar',
            data: [5, 20, 36, 10, 10, 20]
          }
        ]
      };

      // Display the chart using the configuration items and data just specified.
      myChart.setOption(option);
    </script>
  </body>
</html>

引入 echarts 的代码

html 复制代码
https://cdn.jsdelivr.net/npm/echarts@5.6.0/dist/echarts.min.js

js 文件的 DNS

https://cdn.jsdelivr.net/npm/echarts/

javascript 复制代码
https://cdn.jsdelivr.net/npm/echarts@5.6.0/charts.js
javascript 复制代码
/*
* Licensed to the Apache Software Foundation (ASF) under one
* or more contributor license agreements.  See the NOTICE file
* distributed with this work for additional information
* regarding copyright ownership.  The ASF licenses this file
* to you under the Apache License, Version 2.0 (the
* "License"); you may not use this file except in compliance
* with the License.  You may obtain a copy of the License at
*
*   http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing,
* software distributed under the License is distributed on an
* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
* KIND, either express or implied.  See the License for the
* specific language governing permissions and limitations
* under the License.
*/


// In somehow. If we export like
// export * as LineChart './chart/line/install'
// The exported code will be transformed to
// import * as LineChart_1 './chart/line/install'; export {LineChart_1 as LineChart};
// Treeshaking in webpack will not work even if we configured sideEffects to false in package.json

export * from './lib/export/charts.js';
相关推荐
恋猫de小郭几秒前
iOS 26 开始强制 UIScene ,你的 Flutter 插件准备好迁移支持了吗?
android·前端·flutter
Asort1 分钟前
JavaScript设计模式(二十一)——策略模式:灵活算法的艺术与实战
前端·javascript·设计模式
黑云压城After7 分钟前
3D魔方-Css实现方法
前端·css·3d
極光未晚27 分钟前
乾坤微前端项目:前端处理后台分批次返回的 Markdown 流式数据
前端·vue.js·面试
用户66006766853928 分钟前
用 CSS3 导演一场星际穿越:复刻“星球大战”经典片头
前端·css
程序员鱼皮28 分钟前
前后端分离,千万别再搞错了!
java·前端·后端·计算机·程序员·编程·软件开发
前端赵哈哈29 分钟前
Vite 构建后产品详情页图片失效?从路径匹配到映射表的完美解决
前端·vue.js·vite
葡萄城技术团队30 分钟前
React Native 错误处理完全指南
前端
地方地方32 分钟前
event loop 事件循环
前端·javascript·面试
AAA阿giao32 分钟前
不用 JavaScript,你能用 CSS 做到什么?答案:拍一部星战电影!
前端·css