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

这篇具有很好参考价值的文章主要介绍了【Echarts】在html中引入echarts详细步骤教程【源码】。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

vue3中引入echatrs详细步骤 【Echarts】在vue3中使用echarts绘散点图(待更新)_Morning_xx的博客-CSDN博客
vue3组件中单独引入echarts详细步骤: 【vue3】组件中使用引入echarts方法-CSDN博客

1、进入echarts官网

Apache ECharts

点击【下载】

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

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

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

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

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

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>

生成效果:

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

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值后 后一个系列的值会在前一个系列的值上相加。文章来源地址https://www.toymoban.com/news/detail-456042.html

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

到了这里,关于【Echarts】在html中引入echarts详细步骤教程【源码】的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 小程序使用echarts(超详细教程)

    小程序使用echarts第一步就是先引用到小程序里面,可以直接从这里下载 文件很多,我们值下载 ec-canvas 就好,下载完成后,直接放在pages同级目录下 index.js  在我们需要的页面的 js 文件顶部引入 index.wxml index.wxss 参考了大佬的文章

    2024年02月06日
    浏览(32)
  • echarts入门教程(超级详细带案例)

    1.echarts是一款基于JavaScript的数据 可视化图表库 ,提供直观,生动,可交互,可个性化定制的数据可视化图表。ECharts最初由百度团队开源,并于2018年初捐赠给Apache基金会,成为ASF孵化级项目。 2.学习一项技术的关键,还是需要多读官方文档,官网链接Apache ECharts,与之类似的

    2024年02月03日
    浏览(34)
  • 【微信小程序-原生开发】实用教程22 - 绘制图表(引入 echarts,含图表的懒加载-获取到数据后再渲染图表,多图表加载等技巧)

    微信小程序中使用 echarts 需使用官方提供的 ec-canvas 组件 点击下方链接,下载 ec-canvas 组件 https://gitcode.net/mirrors/ecomfe/echarts-for-weixin/-/tree/master 将其中的 ec-canvas 文件夹拷贝到微信小程序的分包中 ( 因 ec-canvas 组件较大,约 1M,若放在主包中很容易超出 2M 的大小限制,不了解

    2024年02月09日
    浏览(52)
  • uniapp引入echarts

    作为前端在开发需求的时候经常会遇到将数据展示为图表的需求,之前一直用的HBuilder的图表插件uCharts,使用方法可以参考我的另一篇博客:uniapp 中使用图表(秋云uCharts图表组件) 但是最近发现uCharts很多功能都需要付费或者开通会员才能使用,对咱这些开发者很不友好,于

    2024年02月16日
    浏览(22)
  • uniapp小程序中引入Echarts

    uni-app微信小程序引用echarts,与pc端不同,如果直接下载echarts包,会导致小程序打包过大。直接上干货!!! 下载插件 将插件导入到项目中,项目中会生成一个 js_sdk 文件夹; 将文件夹下的 uni-ec-canvas 移动至components文件夹下 根据自己的文件引入 在echarts官网中找自己想要的

    2024年02月08日
    浏览(21)
  • vue3+ts+vite项目引入echarts,vue3项目echarts组件封装

    技术栈 :Vue3 + Ts + Vite + Echarts 简介 : 图文详解,教你如何在 Vue3 项目中 引入Echarts , 封装Echarts组件 ,并实现常用Echarts图例 1.1 静态效果 1.2 动态效果 2.1 安装 Echarts npm: pnpm: 2.2 main.ts 中引入 2.3 Echarts 组件封装 /src/components/ReEcharts/index.vue 文件中写入如下代码 3.1 柱状图 实现

    2024年02月09日
    浏览(60)
  • Taro+Vue3 小程序引入echarts表

    背景:根据需求在一个报告界面需要展示不同的echarts表来使数据更友好的显示。 效果如下: 一.taro支持echarts 官方说明:Taro 文档支持引用小程序端第三方组件库 物料文档:Taro 物料市场 | 让每一个轮子产生价值 二.引入echarts-for-weixin插件 github地址: https://github.com/ecomfe/echar

    2024年02月13日
    浏览(33)
  • Vue3中按需引入ECharts(一看就会)

    使用背景:比如做一个工程化项目,且只使用到柱状图和折线图,如果把所有的echarts组件都引入到项目中的话,会影响用户打开页面的速度和项目的性能。所以对于做一个高逼格的程序工程师,我们需要按需引入。   1:废话不多说 老步骤安装   2:自己新建一个 js 文件(名

    2024年02月16日
    浏览(38)
  • 【问题+解决】axios/vue/element/echarts引入报错

    缘由 笔者在html页面引用vue来快速实现页面; head/head 中通过 scriptsrc=\\\"\\\"/script 方法引入,开始引入,应用都是正常,后来用了也没问题;奇怪的是,前几天发现html页面无法出现效果图 更新线上项目发现,html页面加载慢;接口请求超时;页面样式也出现了问题; 当时的引入u

    2024年01月21日
    浏览(43)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包