首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

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

Posted in Javascript onJanuary 05, 2017

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

运行结果

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

运行结果

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

运行结果

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

运行结果

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

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

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

- Author -

little2

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
提高 DHTML 页面性能
Dec 25 Javascript
JS 建立对象的方法
Apr 21 Javascript
return false,对阻止事件默认动作的一些测试代码
Nov 17 Javascript
JavaScript中valueOf函数与toString方法深入理解
Dec 02 Javascript
兼容FF和IE的动态table示例自写
Oct 21 Javascript
使用js实现的简单拖拽效果
Mar 18 Javascript
浅析JS获取url中的参数实例代码
Jun 14 Javascript
一次$.getJSON不执行的简单记录
Jul 19 Javascript
js实现日历的简单算法
Jan 24 Javascript
BootStrap Table复选框默认选中功能的实现代码(从数据库获取到对应的状态进行判断是否为选中状态)
Jul 11 Javascript
在 Angular中 使用 Lodash 的方法
Feb 11 Javascript
vue路由守卫及路由守卫无限循环问题详析
Sep 05 Javascript
微信小程序 数组中的push与concat的区别
Jan 05 #Javascript
微信小程序 数组（增，删，改，查）等操作实例详解
Jan 05 #Javascript
bootstrap制作jsp页面（根据值让table显示选中）
Jan 05 #Javascript
详解PHP中pathinfo()函数导致的安全问题
Jan 05 #Javascript
jQuery电话号码验证实例
Jan 05 #Javascript
纯原生js实现table表格的增删
Jan 05 #Javascript
微信小程序 tabs选项卡效果的实现
Jan 05 #Javascript
Vite(1) Foreign Key(1) JDK(1) 内存池(1) 云服务器(1) expdp(1) 外键约束(1) hook(1) 数据备份(2) 腾讯云(1)
You might like
php调用dll的实例操作动画与代码分享
2012/08/14 PHP
ThinkPHP模板引擎之导入资源文件方法详解
2014/06/18 PHP
Zend Framework页面缓存实例
2014/06/25 PHP
php ucwords() 函数将字符串中每个单词的首字符转换为大写(实现代码)
2016/05/12 PHP
php实现数字补零的方法总结
2018/09/12 PHP
PHP字符串与数组处理函数用法小结
2020/01/07 PHP
javascript add event remove event
2008/04/07 Javascript
Javascript实现滑块滑动改变值的实现代码
2013/04/12 Javascript
jQuery应用之jQuery链用法实例
2015/01/19 Javascript
Jquery动态添加输入框的方法
2015/05/29 Javascript
JavaScript Array对象详解
2016/03/01 Javascript
基于Bootstrap实现tab标签切换效果
2020/04/15 Javascript
基于jquery实现的银行卡号每隔4位自动插入空格的实现代码
2016/11/22 Javascript
js 数据存储和DOM编程
2017/02/09 Javascript
通过构造函数实例化对象的方法
2017/06/28 Javascript
简单的三步vuex入门
2018/05/20 Javascript
node上的redis调用优化示例详解
2018/10/30 Javascript
javascript验证form表单数据的案例详解
2019/03/25 Javascript
JavaScript页面加载事件实例讲解
2019/09/01 Javascript
jQuery 常用特效实例小结【显示与隐藏、淡入淡出、滑动、动画等】
2020/05/19 jQuery
Python的几个高级语法概念浅析(lambda表达式闭包装饰器)
2016/05/28 Python
python装饰器初探(推荐)
2016/07/21 Python
python递归查询菜单并转换成json实例
2017/03/27 Python
基于Django用户认证系统详解
2018/02/21 Python
开启Django博客的RSS功能的实现方法
2020/02/17 Python
对django 2.x版本中models.ForeignKey()外键说明介绍
2020/03/30 Python
如何安装并在pycharm使用selenium的方法
2020/04/30 Python
PyTorch中model.zero_grad()和optimizer.zero_grad()用法
2020/06/24 Python
彻底解决Python包下载慢问题
2020/11/15 Python
python数据抓取3种方法总结
2021/02/07 Python
整理的15个非常有用的 HTML5 开发教程和速查手册
2011/10/18 HTML / CSS
发展部经理职责规定
2014/02/22 职场文书
环保建议书作文
2014/03/12 职场文书
社区健康教育工作方案
2014/06/03 职场文书
小学优秀教师先进事迹材料
2014/12/16 职场文书
python3 字符串str和bytes相互转换
2022/03/23 Python