Echarts --------使用步骤

最新推荐文章于 2024-06-24 16:22:50 发布
最新推荐文章于 2024-06-24 16:22:50 发布
阅读量1.8k 收藏 1
点赞数
分类专栏： Javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/sweetgirl520/article/details/51545531
版权

方式1：模块化单文件引入

1、新建一个echarts.html文件，为ECharts准备一个具备大小（宽高）的Dom。

2、新建<script>标签引入模块化单文件echarts.js

3、新建<script>标签中为模块加载器配置echarts和所需图表的路径（相对路径为从当前页面链接到echarts.js），引入图表文件见引入ECharts2

4、<script>标签内动态加载echarts和所需图表，回调函数中可以初始化图表并驱动图表的生成，option见API & Doc

我的饼图实例

<!DOCTYPE html>
<head>
    <meta charset="utf-8">
    <title>ECharts</title>
</head>

<body>
    <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
    <div id="main" style="height:400px"></div>
    <!-- ECharts单文件引入 -->
    <script src="http://echarts.baidu.com/build/dist/echarts.js"></script>
    <script type="text/javascript">
        // 路径配置
        require.config({
            paths: {
                echarts: 'http://echarts.baidu.com/build/dist'
            }
        });
        
        // 使用
        require(
            [
                'echarts',
                'echarts/chart/pie' // 使用柱状图就加载bar模块，按需加载
            ],
            function (ec) {
                // 基于准备好的dom，初始化echarts图表
                var myChart = ec.init(document.getElementById('main')); 
                
            /*     var option = {
                    tooltip: {
                        show: true
                    },
                    legend: {
                        data:['销量'],
                        textStyle: {
                            color: '#333',
                            fontSize: 12
                        }
                    },
                    xAxis : [
                        {
                            type : 'category',
                            data : ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
                        }
                    ],
                    yAxis : [
                        {
                            type : 'value'
                        }
                    ],
                    series : [
                        {
                            "name":"销量",
                            "type":"bar",
                            "data":[5, 20, 40, 10, 10, 20]
                        }
                    ]
                }; */
                
   /*            var  option = {
                	    title : {
                	        text: '未来一周气温变化',
                	        subtext: '纯属虚构'
                	    },
                	    tooltip : {
                	        trigger: 'axis'
                	    },
                	    legend: {
                	        data:['最高气温','最低气温']
                	    },
                	    toolbox: {
                	        show : true,
                	        feature : {
                	            mark : {show: true},
                	            dataView : {show: true, readOnly: false},
                	            magicType : {show: true, type: ['line', 'bar']},
                	            restore : {show: true},
                	            saveAsImage : {show: true}
                	        }
                	    },
                	    calculable : true,
                	    xAxis : [
                	        {
                	            type : 'category',
                	            boundaryGap : false,
                	            data : ['周一','周二','周三','周四','周五','周六','周日']
                	        }
                	    ],
                	    yAxis : [
                	        {
                	            type : 'value',
                	            axisLabel : {
                	                formatter: '{value} °C'
                	            }
                	        }
                	    ],
                	    series : [
                	        {
                	            name:'最高气温',
                	            type:'line',
                	            data:[11, 11, 15, 13, 12, 13, 10],
                	            markPoint : {
                	                data : [
                	                    {type : 'max', name: '最大值'},
                	                    {type : 'min', name: '最小值'}
                	                ]
                	            },
                	            markLine : {
                	                data : [
                	                    {type : 'average', name: '平均值'}
                	                ]
                	            }
                	        },
                	        {
                	            name:'最低气温',
                	            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 : '平均值'}
                	                ]
                	            }
                	        }
                	    ]
                	}; */
                
                var option = {
                	    title : {
                	        text: '某站点用户访问来源',
                	        subtext: '纯属虚构',
                	        x:'center'
                	    },
                	    tooltip : {
                	        trigger: 'item',
                	        formatter: "{a} <br/>{b} : {c} ({d}%)"
                	    },
                	    legend: {
                	        orient : 'vertical',
                	        x : 'left',
                	        data:['直接访问','邮件营销','联盟广告','视频广告','搜索引擎']
                	    },
                	    toolbox: {
                	        show : true,
                	        feature : {
                	            mark : {show: true},
                	            dataView : {show: true, readOnly: false},
                	            magicType : {
                	                show: true, 
                	                type: ['pie', 'funnel'],
                	                option: {
                	                    funnel: {
                	                        x: '25%',
                	                        width: '50%',
                	                        funnelAlign: 'left',
                	                        max: 1548
                	                    }
                	                }
                	            },
                	            restore : {show: true},
                	            saveAsImage : {show: true}
                	        }
                	    },
                	    calculable : true,
                	    series : [
                	        {
                	            name:'访问来源',
                	            type:'pie',
                	            radius : '55%',
                	            center: ['50%', '60%'],
                	            data:[
                	                {value:335, name:'直接访问'},
                	                {value:310, name:'邮件营销'},
                	                {value:234, name:'联盟广告'},
                	                {value:135, name:'视频广告'},
                	                {value:1548, name:'搜索引擎'}
                	            ]
                	        }
                	    ]
                	};

效果图

方式二：标签式单文件引入

<!DOCTYPE html>
<head>
    <meta charset="utf-8">
    <title>ECharts</title>
</head>
<body>
    <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
    <div id="main" style="height:400px"></div>
    <!-- ECharts单文件引入 -->
    <script src="http://echarts.baidu.com/build/dist/echarts-all.js"></script>
    <script type="text/javascript">
        // 基于准备好的dom，初始化echarts图表
        var myChart = echarts.init(document.getElementById('main')); 
        
        var option = {
            tooltip: {
                show: true
            },
            legend: {
                data:['销量']
            },
            xAxis : [
                {
                    type : 'category',
                    data : ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
                }
            ],
            yAxis : [
                {
                    type : 'value'
                }
            ],
            series : [
                {
                    "name":"销量",
                    "type":"bar",
                    "data":[5, 20, 40, 10, 10, 20]
                }
            ]
        };

        // 为echarts对象加载数据 
        myChart.setOption(option); 
    </script>
</body>



        
                // 为echarts对象加载数据 
                myChart.setOption(option); 
            }
        );
    </script>
</body>
效果图



sweetgirl520
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
echarts 画流程图
张音乐的博客
08-01 2万+
先看效果图 标题 //渲染流程图 var drawForceChart = function(data){ console.log('开始执行流程图'); var forceOption = { tooltip: {}, animationDurationUpdate: 1500, animationEasingUpdat...
echarts-liquidfill.rar
11-30
要使用 `echarts-liquidfill.js`，首先确保你已经在项目中引入了 ECharts 的基础库。然后，你可以通过以下步骤来创建一个水球图： 1. **初始化容器**：在 HTML 中设置一个用于显示图表的 div 容器，例如 `...
echarts-php,百度 Echarts 免折腾版
weixin_35753291的博客
03-17 164
之前写过一篇文字：yii2加入百度echarts的一般步骤，提到要写一个扩展，现在实现了。Yii2 离线使用百度 echarts使用 hisune\echarts-php 和 bower-asset\echarts，这样代码安装完成后，可以离线使用，不用每次都要联网去查百度的echarts。 但是安装会比较慢，请慢慢等待。 本代码最初实现在yiichina，曾提议改成单独的形式，遂有了本代码。功能...
面试成功的不二法门：详解echarts答题章法
最新发布
前端啤酒屋
06-24 971
面试题在网络上有如海洋之深，对于同一知识点，每个人的理解也各有千秋。我们在面试中常常会遇到一个瞬息间脑海里一片空白的情况，其实这并不是因为我们不懂，而是因为我们在回答的时候缺乏一个清晰的思路。那么问题来了，我们如何能逐步唤醒自己的记忆，娓娓道来呢？
echarts-website构建过程
xiaoxiezZ的博客
12-02 530
echarts-website构建过程echarts-website构建过程
echarts-wordcloud词云
preoccupied_的博客
01-21 886
echarts-wordcloud是基于echarts的一个插件，所以我们要首先安装echarts包，然后再安装echarts-wordcloud的包，这里我的练习项目安装的版本；当然，你可以随意安装你需要的版本；
vue 水波纹 echarts-liquidfill组件
耳火的博客
09-07 909
这里 记录了一些本人在工作中用到的一些关于echarts的图表内容，话不多说，直接上代码。本文仅仅简单介绍了echarts 折线图和 水波图 的使用，代码可能有些乱，希望可以帮到你一点。
echarts-for-react源码略读
萌兔兔MMQ！！
10-16 1042
因此实际影响ECharts实例的逻辑被放置到componentDidUpdate那里，这做法和react-amap中在useEffect中通过Marker等实例内置的set方法更新状态的原理是一致的。但这一步采用deep equal比较，来减少ECharts实例的更新。若更新的props包含theme, opts或onEvents则要销毁原来的ECharts实例，重新构建一个新的ECharts实例，并终止更新渲染过程；添加特性，监测容器尺寸的变化，并自动调用ECharts实例的resize方法实现自适应。
vue echarts-liquidfill 水球图
qq_38606923的博客
03-25 1636
Vue+echarts 好看的水球图 下载资源 npm install echarts --save npm install echarts-liquidfill --save echarts版本号用的是4.9.0 echarts-liquidfill 版本号用的是2.0.2 使用步骤 1.指定DOM元素为水球图元素 <div :id="echartsId" :style="{width: '96%', height: '170px'}"></div> 2.引用依赖 //ec
vue-echarts-wordcloud词云
qq_45055165的博客
07-31 896
一，注意事项 在vue中引入echarts-wordcloud依赖，发觉无法正常显示，后经过查找相关资料，发觉是版本问题，echarts-wordcloud 2 对应的是echarts5, echarts-wordcloud 1对应的是echarts 4 二， 步骤 1 安装 npm npm install echarts npm install echarts-wordcloud 2 导入 import * as echarts from 'echarts' import 'echarts-wo
echarts-liquidfill（水球图）
weixin_44744234的博客
04-21 1万+
vue项目里使用echarts-liquidfill（水球图）步骤 echarts水球图并不在echarts常用图表里，是作为插件使用的，因此使用echarts水球图需要先安装echarts和水球图。 npm install echarts --save npm install echarts-liquidfill --save 可以在vue main.js中注册，也可以在单独使用的组件里注册。 import echarts from 'echarts' //引入echarts import 'ech
Echarts—词云库（echarts-wordcloud）配置详解和使用（可自定义形状）
热门推荐
前端探险家的博客
06-14 2万+
我们经常会看到一些网站或者页面有一堆五颜六色的词汇的聚在一块，有大有小的散落着，看着挺好看的；也许项目中也会涉及到显示一些关键词之类的需求，这个时候也可以用词云库（echarts-wordcloud）来实现；echarts-wordcloud是基于echarts的一个词云库，但是在echart官网中的配置相中却没有关于他的介绍，下面我们就来一起慢慢探索并能手到擒来的使用它；1.下载图片首先要找到一张图片，为了成功率较高，随意对图片也是有要求的，图片一定要是矢量图，并且最好为黑色填充，当然其他颜色也行。
echarts-map.zip
06-06
使用ECharts地图功能的步骤大致如下： 1. **引入ECharts库**：首先需要在HTML文件中引入ECharts的主库和地图相关的JavaScript文件。 2. **准备地图数据**：根据需要，从"echarts-map.zip"中获取对应的地图数据文件...
echarts-convert脚本
05-26
使用`echarts-convert`通常涉及以下步骤： 1. 安装：首先，你需要在项目环境中安装`echarts-convert`。如果你使用npm，可以通过命令`npm install echarts-convert`来安装。 2. 转换配置：然后，将你的ECharts图表...
使用Echarts-X.JS实现3D地球
07-06
通过以上步骤，我们可以成功地使用ECharts-X实现一个动态的3D地球展示。在实际项目中，根据需求可以自定义地球的外观，添加数据标记，以及实现更多的交互功能，以提升数据可视化的吸引力和实用性。
echarts-mapJson-master2018.zip
12-14
使用ECharts加载地图JSON数据的过程通常包括以下步骤： 1. 引入ECharts库：在HTML文件中，需要引入ECharts的JavaScript库，可以通过CDN链接或者本地文件引入。 2. 准备地图容器：在HTML中创建一个用于展示地图的div...
Kalendae：JavaScript日期选择和日历控件使用
sweetgirl520的博客
05-12 9669
源码：http://github.com/ChiperSoft/Kalendae demo：http://www.html5tricks.com/demo/Kalendae/index.html Kalendae是一款完全基于JavaScript的日期选择控件和日历组件，值得一提的是，Kalendae并没有依赖任何第三方的JS脚本库，而是用原生的JavaScript实现了如此功能强大
Web表格控件 SlickGrid
sweetgirl520的博客
05-26 7538
SlickGrid 是一个JavaScript编写的数据控件，其采用数据虚拟显示的特性备受后来的Grid推崇，如ExtJS DataGrid，其架构设计优秀，UI交互功能非常丰富，插件化的可扩展功能开发非常值得Web开发人员学习 SlickGrid简单介绍 : https://github.com/mleibman/SlickGrid/wiki 快速入门 : https://githu
单页面Web应用开发框架：Durandal学习入门
sweetgirl520的博客
03-24 4393
Durandal 是一个轻量级的JavaScript框架，其目标是单页面应用（SPAs）的开发变得简单而优雅。它支持MVC、MVP和MVVM等模式，因此不论你采用哪种类型的前端架构，Durandal都能胜任。 Durandal以 RequireJS 为基础，加上一个轻量级的惯例层，带来了令人惊叹的生产效率，并且帮助你维持稳健的编码实践。配上开箱即用的富界面组件、模态对话框、事件/消息、组
EasyUI 简介
sweetgirl520的博客
05-12 2530
easyui是一种基于jQuery的用户界面插件集合。 easyui为创建现代化，互动，JavaScript应用程序，提供必要的功能。 使用easyui你不需要写很多代码，你只需要通过编写一些简单HTML标记，就可以定义用户界面。 easyui是个完美支持HTML5网页的完整框架。 easyui节省您网页开发的时间和规模。 easyui很简单但功能强大的。 在jQuer
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值