DDR爱好者之家

echarts3 使用总结（绘制各种图表,地图）
站长资源 2024/11/28 佚名
13 1538
DDR爱好者之家 Design By 杰米

由于项目需要自学了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 ">


运行结果


echarts3 使用总结（绘制各种图表,地图）


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">


运行结果


echarts3 使用总结（绘制各种图表,地图）


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)'
    }
   }
  }
 ]
};







运行结果


echarts3 使用总结（绘制各种图表,地图）


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">


运行结果


echarts3 使用总结（绘制各种图表,地图）


5、城市地图（以北京为例）


beijing.js可以到官网下载所有代码，在echarts/map/province文件夹中可以找到beijing.js,其他城市的使用同样方法直接引入对应的js即可


代码





<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
</head>
<body>
 <div id="main" style="100%; height: 100%;"></div>
</body>
<script src="/UploadFiles/2021-04-02/echarts.js">


运行结果




echarts3 使用总结（绘制各种图表,地图）


以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。


                                

                                

                                     

                                
DDR爱好者之家 Design By 杰米

                            

                        

                        

                            

                                广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）

                                免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！
                            

                        

                        

                            
                            
                        

                        
                        
DDR爱好者之家 Design By 杰米
ddrfans.com DDR爱好者之家
8,675无损音乐
1,324高清电影
213破解软件
70,141收录资讯

P70系列延期，华为新旗舰将在下月发布

3月20日消息，近期博主@数码闲聊站 透露，原定三月份发布的华为新旗舰P70系列延期发布，预计4月份上市。

而博主@定焦数码 爆料，华为的P70系列在定位上已经超过了Mate60，成为了重要的旗舰系列之一。它肩负着重返影像领域顶尖的使命。那么这次P70会带来哪些令人惊艳的创新呢？

根据目前爆料的消息来看，华为P70系列将推出三个版本，其中P70和P70 Pro采用了三角形的摄像头模组设计，而P70 Art则采用了与上一代P60 Art相似的不规则形状设计。这样的外观是否好看见仁见智，但辨识度绝对拉满。

更新日志

友情链接

杰晶网络 DDR爱好者之家 南强小屋 黑松山资源网 白云城资源网
DDR爱好者之家 Design By 杰米