由于项目需要自学了echarts,下面将学到的东西总结如下,如果有哪里写的不好,请批评指正
一、前期准备
1、使用echarts之前先要引入echarts.js,js可以到官网下载
2、写一个div容器用来装echarts内容,这个容器必须有高度,不然看不到内容。
3、在script中获取div容器的id,根据需要写option中的参数(也许你现在还不知道option是干嘛用的,不要着急往下看),使用setoption生成图表。
(代码如下)注:后面将不再对引入js,获取id,调用option生成图表做赘述
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <!-- 为ECharts准备一个具备大小(宽高)的Dom --> <div id="main" style="width: 600px;height:400px;"></div> <!-- 引入echarts.js --> <script src="/UploadFiles/2021-04-02/echarts.js ">二、各种图表使用
1、柱状图代码
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <!-- 为ECharts准备一个具备大小(宽高)的Dom --> <div id="main" style="width: 600px;height:400px;"></div> <script src="/UploadFiles/2021-04-02/echarts.js ">运行结果
2、折线图
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <div id="pic4" style="width: 600px;height:400px;"></div> <script src="/UploadFiles/2021-04-02/echarts.js">运行结果
3、饼图
由于代码重复就不浪费地方写所有代码,直接替换(一)中的option{}就可以
option = { title : { text: '某站点用户访问来源', subtext: '纯属虚构', x:'center' }, tooltip : { trigger: 'item', formatter: "{a} <br/>{b} : {c} ({d}%)" }, legend: { orient: 'vertical', left: 'left', data: ['直接访问','邮件营销','联盟广告','视频广告','搜索引擎'] }, 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:'搜索引擎'} ], itemStyle: { emphasis: { shadowBlur: 10, shadowOffsetX: 0, shadowColor: 'rgba(0, 0, 0, 0.5)' } } } ] };运行结果
4、全国地图
由于地图比较复杂,所以把全部代码展示出来
china.js可以到官网下载所有代码,在echarts/map文件夹中可以找到china.js,
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <!-- 为ECharts准备一个具备大小(宽高)的Dom --> <div id="main" style="width: 1000px;height:800px;"></div> /*<script src="/UploadFiles/2021-04-02/shine.js">运行结果
5、城市地图(以北京为例)
beijing.js可以到官网下载所有代码,在echarts/map/province文件夹中可以找到beijing.js,其他城市的使用同样方法直接引入对应的js即可
代码
华山资源网 Design By www.eoogi.com广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!华山资源网 Design By www.eoogi.com暂无评论...
更新日志
2024年09月20日
2024年09月20日
- 《真的田震 中国乐坛红极一时的歌者 精品集》[WAV+CUE][300MB]
- 群星.1995-新滚石九大天王之情歌大全【滚石】【WAV+CUE】
- 群星.1993-滚石九大天王十二出好戏·纵夏欢唱【滚石】【WAV+CUE】
- 群星.1993-滚石九大天王十二出好戏·贺岁齐唱【滚石】【WAV+CUE】
- 黑神话悟空上品虫校尉精魄获取方法一览|上品虫校尉精魄收集攻略
- 《指环王:夏尔的传说》推迟至2025年初发行
- 黑神话悟空上品蝎太子精魄获取方法一览|上品蝎太子精魄收集攻略
- 银霞.1977-《台北66电影原声带》台湾复刻版[WAV+CUE]
- 银霞.1980-《你那好冷的小手》台湾珍藏纪念版[WAV+CUE]
- 王菲.2006《菲常好听》引进版[低速原抓WAV+CUE]
- 《三日危情独家的记忆》女角色介绍
- 《天国拯救》拉泰比武大会攻略
- 任天堂推出《马里奥惊奇》NS捆绑包 10月24日发售
- 《孤岛惊魂》能否逆转育碧颓势?曝系列新作正招兵买马
- 天命人呼叫战术轰炸!玩家自制《黑神话:悟空》轰炸机Mod