ECharts入门一

Stella981
• 阅读 578

ECharts入门一

来源于官方网站整理

完整的一个饼状图网页可运行源码

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4 <meta charset="utf-8">
 5 <title>ECharts</title>
 6 <!-- 引入 echarts.js -->
 7 <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/echarts-all-3.js"></script>
 8 </head>
 9 <body>
10 <!-- 为ECharts准备一个具备大小(宽高)的Dom -->
11 <div id="main" style="width: 600px;height:400px;"></div>
12 <script type="text/javascript">
13     // 基于准备好的dom,初始化echarts实例
14 
15     var myChart = echarts.init(document.getElementById('main'));
16 
17     // 指定图表的配置项和数据
18     option = {
19         backgroundColor: '#2c343c',
20         series : [
21         {
22             name: '访问来源',
23             type: 'pie',
24             radius: '55%',
25             data:[
26             {value:235, name:'视频广告'},
27             {value:274, name:'联盟广告'},
28             {value:310, name:'邮件营销'},
29             {value:335, name:'直接访问'},
30             {value:400, name:'搜索引擎'}
31             ],
32 
33              roseType: 'angle',
34             label: {
35                 normal: {
36                     textStyle: {
37                         color: 'rgba(255, 255, 255, 0.3)'
38                     }
39                 }
40             },
41             labelLine: {
42                 normal: {
43                     lineStyle: {
44                         color: 'rgba(255, 255, 255, 0.3)'
45                     }
46                 }
47             },
48             itemStyle: {
49                 normal: {
50                     shadowBlur: 200,
51                     shadowColor: 'rgba(0, 0, 0, 0.5)'
52                 }
53             }
54         }
55         ]
56     };
57 
58     // 使用刚指定的配置项和数据显示图表。
59     myChart.setOption(option);
60 </script>
61 </body>
62 </html>

解析:
1.可以通过require加载需要使用到的模块,默认是require('echarts'),加载的是所有的图表和组件的ECharts包。
2.type:'pie' 饼状型表格
3.radius:'55%' 半径大小
4.data内含有name和value属性
5.itemStyle是一些通用样式,诸如阴影、透明度、颜色、边框颜色、边框宽度等。
其中emphasis(是鼠标hover悬停事件的高亮样式)、normal(正常展示下的样式)
6.backgroundColor: '#2c343c' 背景颜色
7.textStyle 字体样式
8.lineStyle 边线样式
9.roseType: 'angle' 将饼图显示成南丁格尔图

点赞
收藏
评论区
推荐文章
Stella981 Stella981
2年前
32个Python爬虫项目让你一次吃到撑
整理了32个Python爬虫项目。整理的原因是,爬虫入门简单快速,也非常适合新入门的小伙伴培养信心。所有链接指向GitHub,祝大家玩的愉快~O(∩\_∩)OWechatSogou\1\(https://www.oschina.net/action/GoToLink?urlhttp%3A%2F%2Flink.zhihu.com%2F%3
Stella981 Stella981
2年前
SpringBoot入门 1
本文记录了SpringBoot入门的过程,开发工具是IDEA,使用gradle来构建项目。首先学习一个新东西,最好的地方就是他的官方网站(https://www.oschina.net/action/GoToLink?urlhttp%3A%2F%2Fspring.io%2Fguides)。1.首先在电脑上安装好运行环境,JDK1.8及以上
Stella981 Stella981
2年前
ECharts 全新大版本 4.0 正式发布!百度数据可视化实验室成立
2018年1月16日,百度发布了旗下知名开源产品ECharts(echarts.baidu.com(https://www.oschina.net/action/GoToLink?urlhttp%3A%2F%2Flink.zhihu.com%2F%3Ftarget%3Dhttp%253A%2F%2Fecharts.baidu.com%2F))的最新
Stella981 Stella981
2年前
Echarts入门教程精简实用系列
引语:echarts.js是百度团队推出的一款用于图表可视化的插件,用于以图表的形式展现数据,功能强大,上手简单1、从官方网站(https://www.oschina.net/action/GoToLink?urlhttps%3A%2F%2Fecharts.baidu.com%2F)中下载所需的echarts.js文件,该文件因功能
Stella981 Stella981
2年前
HTML5 网络拓扑图整合 OpenLayers 实现 GIS 地图应用
在前面《百度地图、ECharts整合HTforWeb网络拓扑图应用(https://www.oschina.net/action/GoToLink?urlhttp%3A%2F%2Fwww.cnblogs.com%2Fxhload3d%2Fp%2F4358804.html)》我们有介绍百度地图和 HTforWeb(https://www.os
Stella981 Stella981
2年前
Echarts词云图
今天使用Echarts写了个词云图,之前使用pycharts生成的html就是echarts。主要代码如下,另外Echarts需要到https://www.echartsjs.com/下载,开发时使用.js文件即可。(https://www.oschina.net/action/GoToLink?urlhttps%3A%2F%2Fwww.echarts
Stella981 Stella981
2年前
Echart使用
Echart是一款图表插件,功能强大,使用简单。Echart官网:https://echarts.baidu.com/examples/charttypeline(https://www.oschina.net/action/GoToLink?urlhttps%3A%2F%2Fecharts.baidu.com%2Fexamples%2F%23c
Stella981 Stella981
2年前
ECharts 实现3D嵌套饼图
   嵌套饼图的实现主要是定义多层数据,实际上只需要写成json格式的数组,多层数据源之间用逗号连接起来,自定义样式之后就可以实现,与非嵌套饼图没有很大的区别。1.下载Echarts插件,官网地址:http://echarts.baidu.com/download.html(https://www.oschina.net/action/GoTo
Stella981 Stella981
2年前
ECharts.js 简单示例
ECharts.js学习(一)简单入门(https://www.oschina.net/action/GoToLink?urlhttps%3A%2F%2Fwww.cnblogs.com%2Fleoxuan%2Fp%2F6511123.html)
Stella981 Stella981
2年前
ECharts+BaiduMap+HT for Web网络拓扑图应用
前一篇谈及到了ECharts(https://www.oschina.net/action/GoToLink?urlhttp%3A%2F%2Fecharts.baidu.com%2F)整合HTforWeb(https://www.oschina.net/action/GoToLink?urlhttp%3A%2F%2Fwww.hightopo.