【Echarts】在html中引入echarts详细步骤教程【源码】

已于 2023-10-20 09:17:39 修改
阅读量9.8k 收藏 51
点赞数 15
分类专栏： 前端开发 文章标签： 前端 echarts
于 2023-03-07 15:58:41 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_67986791/article/details/129383924
版权
vue3中引入echatrs详细步骤 ： 【Echarts】在vue3中使用echarts绘散点图（待更新）_Morning_xx的博客-CSDN博客
vue3组件中单独引入echarts详细步骤： 【vue3】组件中使用引入echarts方法-CSDN博客

1、进入echarts官网

Apache ECharts

点击【下载】

2、滑到最下面、点击【在线定制】

3、选择要打包的图表后，点击【下载】生成echarts.min.js文件

4、将下载后的echarts.min.js放到同级目录里面，引入html

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <title>ECharts</title>
    <!-- 引入刚刚下载的 echarts.min.js -->
    <script src="./echarts.min.js"></script>
</head>

<body>
    <!-- 为 ECharts 准备一个定义了宽高的 DOM -->
    <div id="main" style="width: 600px;height:400px;">
    </div>
    <script type="text/javascript">
    
    </script>
</body>

</html>

5、到官网找一个案例，我找了一个散点图案例，下面是HTML源码

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <title>ECharts</title>
    <!-- 引入刚刚下载的 ECharts 文件 -->
    <script src="./echarts.min.js"></script>
</head>

<body>
    <!-- 为 ECharts 准备一个定义了宽高的 DOM -->
    <div id="main" style="width: 600px;height:400px;">
    </div>
    <script type="text/javascript">
        var chartDom = document.getElementById('main');
        var myChart = echarts.init(chartDom);
        var option;

        const dataAll = [
            [
                [10.0, 8.04],
                [8.0, 6.95],
                [13.0, 7.58],
                [9.0, 8.81],
                [11.0, 8.33],
                [14.0, 9.96],
                [6.0, 7.24],
                [4.0, 4.26],
                [12.0, 10.84],
                [7.0, 4.82],
                [5.0, 5.68]
            ],
            [
                [10.0, 9.14],
                [8.0, 8.14],
                [13.0, 8.74],
                [9.0, 8.77],
                [11.0, 9.26],
                [14.0, 8.1],
                [6.0, 6.13],
                [4.0, 3.1],
                [12.0, 9.13],
                [7.0, 7.26],
                [5.0, 4.74]
            ],
            [
                [10.0, 7.46],
                [8.0, 6.77],
                [13.0, 12.74],
                [9.0, 7.11],
                [11.0, 7.81],
                [14.0, 8.84],
                [6.0, 6.08],
                [4.0, 5.39],
                [12.0, 8.15],
                [7.0, 6.42],
                [5.0, 5.73]
            ],
            [
                [8.0, 6.58],
                [8.0, 5.76],
                [8.0, 7.71],
                [8.0, 8.84],
                [8.0, 8.47],
                [8.0, 7.04],
                [8.0, 5.25],
                [19.0, 12.5],
                [8.0, 5.56],
                [8.0, 7.91],
                [8.0, 6.89]
            ]
        ];
        const markLineOpt = {
            animation: false,
            label: {
                formatter: 'y = 0.5 * x + 3',
                align: 'right'
            },
            lineStyle: {
                type: 'solid'
            },
            tooltip: {
                formatter: 'y = 0.5 * x + 3'
            },
            data: [
                [
                    {
                        coord: [0, 3],
                        symbol: 'none'
                    },
                    {
                        coord: [20, 13],
                        symbol: 'none'
                    }
                ]
            ]
        };
        option = {
            title: {
                text: "Anscombe's quartet",
                left: 'center',
                top: 0
            },
            grid: [
                { left: '7%', top: '7%', width: '38%', height: '38%' },
                { right: '7%', top: '7%', width: '38%', height: '38%' },
                { left: '7%', bottom: '7%', width: '38%', height: '38%' },
                { right: '7%', bottom: '7%', width: '38%', height: '38%' }
            ],
            tooltip: {
                formatter: 'Group {a}: ({c})'
            },
            xAxis: [
                { gridIndex: 0, min: 0, max: 20 },
                { gridIndex: 1, min: 0, max: 20 },
                { gridIndex: 2, min: 0, max: 20 },
                { gridIndex: 3, min: 0, max: 20 }
            ],
            yAxis: [
                { gridIndex: 0, min: 0, max: 15 },
                { gridIndex: 1, min: 0, max: 15 },
                { gridIndex: 2, min: 0, max: 15 },
                { gridIndex: 3, min: 0, max: 15 }
            ],
            series: [
                {
                    name: 'I',
                    type: 'scatter',
                    xAxisIndex: 0,
                    yAxisIndex: 0,
                    data: dataAll[0],
                    markLine: markLineOpt
                },
                {
                    name: 'II',
                    type: 'scatter',
                    xAxisIndex: 1,
                    yAxisIndex: 1,
                    data: dataAll[1],
                    markLine: markLineOpt
                },
                {
                    name: 'III',
                    type: 'scatter',
                    xAxisIndex: 2,
                    yAxisIndex: 2,
                    data: dataAll[2],
                    markLine: markLineOpt
                },
                {
                    name: 'IV',
                    type: 'scatter',
                    xAxisIndex: 3,
                    yAxisIndex: 3,
                    data: dataAll[3],
                    markLine: markLineOpt
                }
            ]
        };

        option && myChart.setOption(option);
    </script>
</body>

</html>

生成效果：

6.Echarts-基础配置

以下配置很重要：series xAxis yAxis grid tooltip title legend color

  • series

  • 系列列表，每个系列通过 type 决定自己的图表类型

  • 图标数据，指定什么类型的图标，可以多个图表重叠。

  • xAxis：直角坐标系 grid 中的 x 轴

  • boundaryGap: 坐标轴两边留白策略 true，这时候刻度只是作为分隔线，标签和数据点都会在两个刻度之间的带(band)中间。

  • yAxis：直角坐标系 grid 中的 y 轴

  • grid：直角坐标系内绘图网格。

  • title：标题组件

  • tooltip：提示框组件

  • legend：图例组件

  • color：调色盘颜色列表

数据堆叠，同个类目轴上系列配置相同的stack值后 后一个系列的值会在前一个系列的值上相加。

如有帮助请不要吝啬你的赞哦~~~~！

任尔东西南北风_A
关注
  • 15
    点赞
  • 踩
  • 51
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
专栏目录
html5 echarts地图分布动画特效特效代码
03-20
html5 echarts地图分布动画特效是一款带有炫光效果的html5 echarts图表插件。
HTML+VUE+Echarts折线图让某一个点闪烁
11-04
HTML+VUE+Echarts折线图让某一个点闪烁
vue 移动端h5引入vant 和echarts的适配
baidu_41899377的博客
07-17 1578
3.在根目录新建.postcssrc.js(vant组件偏小。根据机型适配vant组件。4.对于echrat适配移动端，新建font.js.在入口文件man.js引入。2.建vant文件夹按需分配.在入口文件main.js引入。在public文件夹更改index.html。在echart中设置文字大小使用。
雷达图的代码实现echarts
l15972865175的博客
04-01 591
雷达图的含义：（非常适合性能分析）雷达图（Radar Chart），也被称为蛛网图或极坐标图，是一种用于可视化多个维度数据的图表形式。雷达图通过在一个圆形的坐标系上绘制多个半径相等的轴线（通常是5个或更多），每个轴线代表一个特定的数据维度。雷达图的含义在于通过展示多个维度的数据并将其以图形方式呈现，帮助人们直观地理解和比较各个维度之间的差异和关系。
html引入ECharts的两种方式
weixin_60196946的博客
01-03 594
【代码】html引入ECharts的两种方式。
h5引入echarts地图以及不显示的解决方法
qq_45615337的博客
03-25 2253
h5引入echarts地图 引入echarts.js。 创建div div必须有高度 <div id="main" style="height: 533px;"></div> 下载并引入地区js。没有的点击这里下载 echarts.registerMap('中华人民共和国',chinaJson); //第一个参数是地名必须中文，第二个参数对应引入文件中的变量名。 var chart = echarts.init(document.getElemen
echarts.min.js
07-26
基于layUI模块规范改造的 echarts组件，测试完美，可用直接应用到自己的项目中 使用方法 layui.config({ base: '../../../layuiadmin/lib/' //静态资源所在路径(使用时,根据自己的结构改动) }).extend({ echarts: '/extend/echarts.min' //主入口模块(名字同样根据自己的结构改动) }); layui.use(['form','table','echarts','util'],function(){ var echarts = layui.echarts; var $ = layui.jquery; var table = layui.table; console.log(echarts); var myCharts = echarts.init($(dom)); // 要绘制图表的盒子dom;
echarts.js(echarts.min.js)的内容
weixin_72322475的博客
09-28 3232
echarts.js(echarts.min.js)
如何找到echarts.min.js，并使用echarts
热门推荐
qq_43453731的博客
07-10 1万+
现在登录Echarts官网，找到下载界面，你会发现下载界面变成在这个界面你已经找不到完整版、精简版之类的，可以下载的全是代码，这对于小白来说，是不是一头雾水啊！没关系，接着往下看！！！ 1.下载Echarts 网址：https://www.7down.com/soft/214165.html 点击下载。下载完后，解压如图所示 一定要有echart.min.js文件。 2.创建一个HTML文件，写下...
使用Echarts实现动态柱状图
huhuhuja
10-30 6548
效果图： 代码如下： <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>第一个 ECharts 实例</title> <!-- 引入 echarts.js --> <script src="https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js">
在echart.js里面使用html标签内容
程序媛的博客
03-01 4407
我们使用echart图表的时候，通常要对显示的数据进行样式修改，我们可以在formatter函数里面进行修改。
layui中引入echarts示例.rar
09-26
layui中引入echarts示例
echarts 图形数据调用 html 调用案例
08-24
echarts 图形数据调用 html 调用案例，适合新手学习，调用
基于ECharts+html大数据可视化展示平台模板源码
06-16
30套ECharts+html大数据可视化展示平台模板，页面美观，可以根据自己需求修改数据和样式，适合初学者直接下载使用。
echarts数据可视化项目教程项目笔记源码
05-08
echarts数据可视化项目教程项目笔记源码
QT中加入Echarts.rar
10-09
如何在QT中加入Echarts图表，实现可视化数据。这里放入了mian.js和写好的html文件，并在说明文档中说明了如何添加的具体步骤。
基于ECharts技术的可视化大屏数据展示HTML源码
03-25
项目概述：基于ECharts技术实现的可视化大屏数据展示HTML源码，由pink老师倾力打造，展现数据魅力。本项目共包含29个文件，涉及JavaScript、HTML、CSS等多种技术语言。文件类型包括：JavaScript文件8个，图片文件7个...
原生html配合canvas仿echarts图标组件合集源码.zip
06-07
原生html配合canvas仿echarts图标组件合集源码.zip
html5 echarts汽车仪表盘图表动画特效
最新发布
04-16
同时，HTML5的跨平台特性也确保了ECharts的仪表盘图表能够在各种设备上流畅运行，为用户带来一致的数据可视化体验。 ECharts的汽车仪表盘图表不仅外观精美，还具备丰富的动画特效。当数据发生变化时，仪表盘上的...
uniapp中使用echarts步骤
07-13
在 Uniapp 中使用 ECharts 的步骤如下： 1. 安装 ECharts：可以通过 npm 或者直接下载 ECharts 的源码包进行安装。如果使用 npm，可以运行以下命令进行安装： ``` npm install echarts --save ``` 2. 在页面中引入 ECharts：在需要使用 ECharts 的页面中，可以通过 `<script>` 标签引入 ECharts 的源码文件。例如，可以在 `index.vue` 文件中引入 ECharts： ```html <script src="path/to/echarts.min.js"></script> ``` 3. 创建图表容器：在页面中创建一个容器用于显示 ECharts 图表。可以在 `index.vue` 文件的 `<template>` 中添加一个 `<div>` 元素作为图表容器。例如： ```html <template> <div class="chart-container"></div> </template> ``` 4. 初始化图表对象：在页面的 `<script>` 中，使用 `echarts.init` 方法初始化一个 ECharts 图表对象，并绑定到图表容器上。例如，在 `index.vue` 文件中的 `mounted` 钩子函数中进行初始化： ```javascript <script> import echarts from 'echarts'; export default { mounted() { const chartContainer = document.querySelector('.chart-container'); const chart = echarts.init(chartContainer); // 其他配置和数据处理 } } </script> ``` 5. 配置图表和数据：根据需求，可以通过 `setOption` 方法配置图表的样式、数据等。例如，在 `index.vue` 文件的 `mounted` 钩子函数中添加以下代码： ```javascript chart.setOption({ title: { text: '示例图表' }, xAxis: { type: 'category', data: ['A', 'B', 'C', 'D', 'E'] }, yAxis: { type: 'value' }, series: [{ data: [10, 20, 30, 40, 50], type: 'bar' }] }); ``` 这样就完成了在 Uniapp 中使用 ECharts 的基本步骤。你可以根据自己的需求进一步配置和优化图表的样式和交互效果。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值