铁雪资源网 Design By www.gsvan.com

由于项目需要自学了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 使用总结(绘制各种图表,地图)

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

标签:
echarts3,使用,echarts3,地图使用,echarts图表

铁雪资源网 Design By www.gsvan.com
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
铁雪资源网 Design By www.gsvan.com

评论“echarts3 使用总结(绘制各种图表,地图)”

暂无echarts3 使用总结(绘制各种图表,地图)的评论...

稳了!魔兽国服回归的3条重磅消息!官宣时间再确认!

昨天有一位朋友在大神群里分享,自己亚服账号被封号之后居然弹出了国服的封号信息对话框。

这里面让他访问的是一个国服的战网网址,com.cn和后面的zh都非常明白地表明这就是国服战网。

而他在复制这个网址并且进行登录之后,确实是网易的网址,也就是我们熟悉的停服之后国服发布的暴雪游戏产品运营到期开放退款的说明。这是一件比较奇怪的事情,因为以前都没有出现这样的情况,现在突然提示跳转到国服战网的网址,是不是说明了简体中文客户端已经开始进行更新了呢?