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

2024-10-07 03:18:20

由于项目需要自学了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="js/echarts.js "></script>
 <script>
 获取容器的id并赋值给变量myChart
 var myChart = echarts.init(document.getElementById('main'));
 /*用来配置参数*/
 option = {
  }
  /*调用option生成图表*/
 myChart.setOption(option)
 </script>
</body>
</html>

二、各种图表使用

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="js/echarts.js "></script>
 <script>
 var myChart = echarts.init(document.getElementById('main'));
 myChart.title = '坐标轴刻度与标签对齐';
 option = {
  color: ['#3398DB'],
  tooltip : {
   trigger: 'axis',
   axisPointer : {   // 坐标轴指示器，坐标轴触发有效
    type : 'shadow'  // 默认为直线，可选为：'line' | 'shadow'
   }
  },
  grid: {
   left: '3%',
   right: '4%',
   bottom: '3%',
   containLabel: true
  },
  xAxis : [
   {
    type : 'category',
    data : ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
    axisTick: {
     alignWithLabel: true
    }
   }
  ],
  yAxis : [
   {
    type : 'value'
   }
  ],
  series : [
   {
    name:'直接访问',
    type:'bar',
    barWidth: '60%',
    data:[10, 52, 200, 334, 390, 330, 220]
   }
  ]
 };
 myChart.setOption(option)
 </script>
</body>
</html>

运行结果

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="js/echarts.js"></script>
 <script>
  var myChart13 = echarts.init(document.getElementById('pic4'));
  var data = [];
  option15 = {
    title: {
     text: '曲线',
    },
    tooltip: {
     trigger: 'axis',

    },
    legend: {
     data:['昨日(11月8日)','今日(11月9日)']
    },
    grid: {
     left: '1%',
     right: '1%',
     bottom: '3%',
     containLabel: true
    },
    toolbox: {
     show: false,
     feature: {
      dataZoom: {
       yAxisIndex: 'none'
      },
      dataView: {readOnly: false},
      magicType: {type: ['line', 'bar']},
      restore: {},
      saveAsImage: {}
     }
    },
    color:["red","#CD3333"],
    xAxis: {
     type: 'category',
     boundaryGap: false,
     data : ['1','2','3','4','5','6','7','8','9','10','11','12','13','14','15','16','17','18','19','20','21','22','23','24']
    },
    yAxis: {
     type: 'value',
     name: '单位（kW）',
     axisLabel: {
      formatter: '{value}'
     }
    },
    series: [
     {
      name:'昨日(11月8日)',
      type:'line',
      data:[110,106,110,110,318,119,205,256,156,309,256,306,206,356,456,486,565.45,234,156,206,126,256,150,276],

     },
     {
      type:'line',
      name : '今日(11月9日)',
      data:[210,136,120,120,118,219,195,176,156,329,356,346,406.54,256,156],
     }
      ]
   };

  myChart13.setOption(option15);
 </script>
</body>
</html>

运行结果

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="node_modules/echarts/theme/shine.js"></script>*/
 <script src="js/echarts.js"></script>
 <script src="node_modules/echarts/map/js/china.js"></script>
 <script type="text/javascript">
  var myChart = echarts.init(document.getElementById('main'), 'shine');
    function randomData() {
   return Math.round(Math.random()*1000);
  }
  option = {
   title: {
    text: 'iphone销量',
    subtext: '纯属虚构',
    left: 'center'
   },
   tooltip: {
    trigger: 'item'
   },
   legend: {
    orient: 'vertical',
    left: 'left',
    data:['iphone3','iphone4','iphone5']
   },
   visualMap: {
    min: 0,
    max: 2500,
    left: 'left',
    top: 'bottom',
    text: ['高','低'],   // 文本，默认为数值文本
    calculable: true
   },
   toolbox: {
    show: false,
    orient: 'vertical',
    left: 'right',
    top: 'center',
    feature: {
     dataView: {readOnly: false},
     restore: {},
     saveAsImage: {}
    }
   },
   series: [
    {
      itemStyle: {
       normal: {
          color: function (params) {
           var colorList = [
            '#C1232B', '#B5C334', '#FCCE10', '#E87C25', '#27727B',
            '#FE8463', '#9BCA63', '#FAD860', '#F3A43B', '#60C0DD',
            '#D7504B', '#C6E579', '#F4E001', '#F0805A', '#26C0C0'
           ];
           return colorList[params.dataIndex]
          },

         }
        },
     name: 'iphone3',
     type: 'map',
     mapType: 'china',
     roam: false,
     label: {
      normal: {
       show: true
      },
      emphasis: {
       show: true
      }
     },
     data:[
      {name: '北京',value: randomData() },
      {name: '天津',value: randomData() },
      {name: '上海',value: randomData() },
      {name: '重庆',value: randomData() },
      {name: '河北',value: randomData() },
      {name: '河南',value: randomData() },
      {name: '云南',value: randomData() },
      {name: '辽宁',value: randomData() },
      {name: '黑龙江',value: randomData() },
      {name: '湖南',value: randomData() },
      {name: '安徽',value: randomData() },
      {name: '山东',value: randomData() },
      {name: '新疆',value: randomData() },
      {name: '江苏',value: randomData() },
      {name: '浙江',value: randomData() },
      {name: '江西',value: randomData() },
      {name: '湖北',value: randomData() },
      {name: '广西',value: randomData() },
      {name: '甘肃',value: randomData() },
      {name: '山西',value: randomData() },
      {name: '内蒙古',value: randomData() },
      {name: '陕西',value: randomData() },
      {name: '吉林',value: randomData() },
      {name: '福建',value: randomData() },
      {name: '贵州',value: randomData() },
      {name: '广东',value: randomData() },
      {name: '青海',value: randomData() },
      {name: '西藏',value: randomData() },
      {name: '四川',value: randomData() },
      {name: '宁夏',value: randomData() },
      {name: '海南',value: randomData() },
      {name: '台湾',value: randomData() },
      {name: '香港',value: randomData() },
      {name: '澳门',value: randomData() }
     ]

    }
   ]
  };
  myChart.setOption(option);
 </script> 

</body>
</html>

运行结果

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="js/echarts.js"></script>
<script src="js/map/js/province/beijing.js"></script>
<script>
 var myChart = echarts.init(document.getElementById('main'));
 var option = {
  title: {
   text : '北京地图',
   subtext : '-。-'
  },
  tooltip : {
   trigger: 'item',
   formatter: function(a){
    return a[2];
   }
  },
  legend: {
   orient: 'vertical',
   x:'right',
   data:['数据名称']
  },
  dataRange: {
   min: 0,
   max: 1000,
   color:['orange','yellow'],
   text:['高','低'],   // 文本，默认为数值文本
   calculable : true
  },
  series : [
   {
    name: '数据名称',
    type: 'map',
    mapType: '北京',
    selectedMode : 'single',
    itemStyle:{
     normal:{label:{show:true}},
     emphasis:{label:{show:true}}
    },
    data:[
     {name: '怀柔区',value: Math.round(Math.random()*1000)},
     {name: '延庆县',value: Math.round(Math.random()*1000)},
     {name: '密云县',value: Math.round(Math.random()*1000)},
     {name: '昌平区',value: Math.round(Math.random()*1000)},
     {name: '平谷区',value: Math.round(Math.random()*1000)},
     {name: '顺义区',value: Math.round(Math.random()*1000)},
     {name: '门头沟区',value: Math.round(Math.random()*1000)},
     {name: '海淀区',value: Math.round(Math.random()*1000)},
     {name: '朝阳区',value: Math.round(Math.random()*1000)},
     {name: '石景山区',value: Math.round(Math.random()*1000)},
     {name: '西城区',value: Math.round(Math.random()*1000)},
     {name: '东城区',value: Math.round(Math.random()*1000)},
     {name: '宣武区',value: Math.round(Math.random()*1000)},
     {name: '丰台区',value: Math.round(Math.random()*1000)},
     {name: '房山区',value: Math.round(Math.random()*1000)},
     {name: '通州区',value: Math.round(Math.random()*1000)},
     {name: '大兴区',value: Math.round(Math.random()*1000)},

    ]
   }
  ]
 };
 myChart.setOption(option);
</script>
</html>

运行结果

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

详解ECharts使用心得总结

前言上周项目组要临时给客户做一个演示的原型,首页设计的是一个中国地图,本来打算用谷歌的地图,但是,做出来之后,整体的效果看起来太差了,最后就在网上搜相关的地图呈现的控件,然后就找到了这个ECharts报表呈现组件,挺不错的一个组件,而且地图数据都是离线的,真心很赞.但是,使用起来却颇费了一番工夫.所以就把使用中的一些心得体会跟大家分享一下. 1. 插件的下载以下是ECharts的下载链接,需要注意的是ECharts内部也是依赖于另一个插件的叫ZRender,当然对于大部分图表而言不需要
如何使用PHP+jQuery+MySQL实现异步加载ECharts地图数据(附源码下载)

ECharts地图主要用于地理区域数据的可视化,展示不同区域的数据分布信息.ECharts官网提供了中国地图.世界地图等地图数据下载,通过js引入或异步加载json文件的形式调用地图. 效果演示源码下载本文将结合实例讲解如何使用PHP+jQuery+MySQL实现异步加载ECharts地图数据,我们以中国地图为例,展示去年(2015年)我国各省份GDP数据.通过异步请求php,读取mysql中的数据,然后展示在地图上,因此本文除了你掌握前端知识外,还需要你了解PHP以及MySQL方
基于Echarts 3.19 制作常用的图形(非静态)

饼图: 环境:Echarts 3.19 vs2013 实现方式:ajax+ashx+json 注意事项: 官网所需格式为 [{value:23,name:'xxxx' }] 请将key 的名字不要写错具体代码,各位看官请下移目光.  <script src="../Scripts/jquery-1.8.2.min.js"></script> <script src="../Scripts/echarts/
Echarts基本用法_动力节点Java学院整理

echarts太完美了: 1,开源软件,无私的为我们提供漂亮的图形界面: 2,使用简单,默默的为我们封装了重要的js,只要会引用就会使用echarts: 3,种类多,echarts为我们提供了各种图标,其中最具象征的就是地图了: 4,兼容性好,基于html5动画渲染超棒. echarts官网提供了源码和说明文档,使用echarts需要先到官网下载需要的js源文件. 官网上的demo中夹杂着很多我们用不到的东西,想使用饼状图就得从demo中把不用的去掉,劈植斩叶留下最原始的功能实现.这样毕竟比较
echarts图表导出excel示例

根据传入的参数生成相应的图形复制代码代码如下: loadChart : function(data,item){ var that = this; require(['echarts', 'echarts/chart/bar', 'echarts/chart/line', 'echarts/chart/pie'], function(ec) { that.body.setHeight(800); var myChart = ec.init(that.body.dom);
jQuery插件echarts实现的多柱子柱状图效果示例【附demo源码下载】

本文实例讲述了jQuery插件echarts实现的多柱子柱状图效果.分享给大家供大家参考,具体如下: 1.问题背景: 利用ECharts制作一个多柱子柱状图,其中数据源模拟动态获取 2.实现源码: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>echarts-多柱子柱状图</title> <script type="text/
jQuery插件Echarts实现的渐变色柱状图

效果图: 代码如下: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>ECharts柱状图</title> </head> <body>  <div id="container" style="width:
echarts3 使用总结（绘制各种图表,地图）

由于项目需要自学了echarts,下面将学到的东西总结如下,如果有哪里写的不好,请批评指正一.前期准备 1.使用echarts之前先要引入echarts.js,js可以到官网下载 2.写一个div容器用来装echarts内容,这个容器必须有高度,不然看不到内容. 3.在script中获取div容器的id,根据需要写option中的参数(也许你现在还不知道option是干嘛用的,不要着急往下看),使用setoption生成图表. (代码如下)注:后面将不再对引入js,获取id,调用option生
Python绘制地理图表可视化神器pyecharts

目录地图地图模板系列中国地图省份数据地图(重庆地图) 中国城市地图数据地图(分段型) 世界地图中国地图带城市(详细) 中国连续数据地图复杂地图观赏地图这期文章我们一起来看看地图是如何绘制的,如何在地图里面添加数据进行多维度的展示,下面我们一起来感受一下地图的魅力吧! “地图就是依据一定的数学法则,使用制图语言,通过制图综合,在一定的载体上,表达地球(或其他天体)上各种事物的空间分布.联系及时间中的发展变化状态的图形. 地图的特征包括:由于特殊的数学法则而产生的可量测性:由于使用符
Python可视化神器pyecharts之绘制地理图表练习

目录炫酷地图 3D炫酷地图模板系列重庆市3D地图展示中国3D地图中国3D数据地图(适合做数据可视化) 全国行政区地图(带城市名字) 地球展示炫酷地图前期我们介绍了很多的地图模板,不管是全球的还是中国的,其实我感觉都十分的炫酷,哈哈哈,可是还有更加神奇的,更加炫酷的地图模板,下面让我们一起一饱眼福吧! 3D炫酷地图模板系列重庆市3D地图展示 from pyecharts import options as opts from pyecharts.charts import Map3D
Python可视化神器pyecharts绘制地理图表

目录地理图表地理图表之热力图系列模板人口流动趋势图(中国) 中国城市分段热力图重庆省份微塑料分布热力图中国城市连续热力图中国城市热力动态图中国城市散点热力图地理图表什么是地理图表?地理图表有什么作用?地理图表主要应用在那些领域? 其实这些问题看看下面的实例图形就已不攻自破了,地理图表一看首先就是地图,然后在地理图表里面展示数据,比如说热力图,趋势流动图,人口密集分布图,反正地理坐标相关的就可以运用在这个里面,其次图形支持全球地图,全球国家,中国,中国的所有的省份的地图,反正应有
Android开发中使用achartengine绘制各种图表的方法

本文实例讲述了Android开发中使用achartengine绘制各种图表的方法.分享给大家供大家参考,具体如下: 1. ABarChart.java package com.anjoyo.achartengine; import java.util.Random; import org.achartengine.ChartFactory; import org.achartengine.chart.BarChart.Type; import org.achartengine.model.Cat
C#绘制飞行棋地图小程序

1. 初始化地图,在绘制时可先将地图进行初始化,用数组来存储关卡的位置,然后利用循环给地图中关卡所在处赋予代表关卡的值. 关键代码如下 /// <summary> /// 初始化游戏地图 /// </summary> static void InitialMap() { for (int i=0;i<Map.Length;i++) { Map[i] =0; } //用于存储关卡位置 int[] luckyTurn = { 6, 23, 40, 55, 69, 83,98 }
基于Python绘制个人足迹地图

前言前两年,足迹地图小程序风靡朋友圈,一时间大家都流行晒自己的旅行地图.但是,笔者最近体验了好几款足迹地图的小程序,发现这些小程序虽然号称是足迹地图,但最多只是展示到省级别,无法精确到市级别,因此,笔者周末花了点时间,用Python来绘制自己的个人足迹地图,可以精确到市级别. 下面的部分,笔者将介绍如何简单地来绘制个人足迹地图. 首先我们需要安装以下Python的第三方模块: echarts-china-cities-pypkg==0.0.9 echarts-china-provinces-p
如何用Python绘制棒棒糖图表

大家好,我是小F- 条形图在数据可视化里,是一个经常被使用到的图表. 虽然很好用,也还是存在着缺陷呢.比如条形图条目太多时,会显得臃肿,不够直观. 棒棒糖图表则是对条形图的改进,以一种小清新的设计,清晰明了表达了我们的数据. 下面小F就给大家介绍一下,如何使用Python绘制棒棒糖图表. 使用到的是我国1949到2019年,历年的出生人口数据,数据来源国家统计局. 首先读取一下数据. import pandas as pd import matplotlib.pyplot as plt # 读取
如何利用Python快速绘制海报级别地图详解

目录 1 简介 2 利用prettymaps快速制作海报级地图 2.1 prettymaps的几种使用方式 2.1.1 圆形模式 2.1.2 圆角矩形模式 2.1.3 添加文字内容总结 1 简介基于Python中诸如matplotlib等功能丰富.自由度极高的绘图库,我们可以完成各种极富艺术感的可视化作品,关于这一点我在系列文章在模仿中精进数据可视化中已经带大家学习过很多案例了. 而今天我要给大家介绍的这个Python库prettymaps非常的有趣,基于它,我们只需要简单的代码就可以对地球
Python使用pyecharts绘制世界地图,省级地图,城市地图实例详解

目录 1.世界地图绘制演示 ① 世界地图数据准备 ② 世界地图生成 2.省份(河北省)地图绘制演示 ① 省份地图数据准备 ② 省份地图生成 3.城市(承德市)地图绘制演示 ① 城市地图数据准备 ② 城市地图生成 1.世界地图绘制演示先给大家看下效果图哈. ① 世界地图数据准备地图数据如下: 因为是世界地图,所以对标的国家,我设置了 2 组,里面的数据是随机生成的. # -*- coding:utf-8 -*- # 2022-2-14 # 作者:小蓝枣 # pyecharts地图 # 需要引用

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

相关推荐

随机推荐