首页
所有分类
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 相关文章推荐
原始的js代码和jquery对比体会
Sep 10 Javascript
jquery.form.js用法之清空form的方法
Mar 07 Javascript
jquery实现可横向和竖向展开的动态下滑菜单效果
Aug 24 Javascript
BootStrap的table表头固定tbody滚动的实例代码
Aug 24 Javascript
HTML Table 空白单元格补全的简单实现
Oct 13 Javascript
函数四种调用模式以及其中的this指向
Jan 16 Javascript
Angular.js之作用域scope'@','=','&amp;'实例详解
Feb 28 Javascript
Vue制作Todo List网页
Apr 26 Javascript
jQuery remove()过滤被删除的元素（推荐）
Jul 18 jQuery
JavaScript 通过Ajax 动态加载CheckBox复选框
Aug 31 Javascript
AngularJS标签页tab选项卡切换功能经典实例详解
May 16 Javascript
15个顶级开源JavaScript框架和库
Oct 10 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
内存(1) 访问日志(2) 进程假死(1) 策略(1) UV(1) PV(1) 线程(1) 连接数(1) ipv6(1) 弱口令(1)
You might like
PHP5全版本绕过open_basedir读文件脚本漏洞详细介绍
2015/01/20 PHP
老生常谈PHP位运算的用途
2017/03/12 PHP
javascript 限制输入脚本大全
2009/11/03 Javascript
FF IE浏览器修改标签透明度的方法
2014/01/27 Javascript
js 事件截取enter按键页面提交事件示例代码
2014/03/04 Javascript
AngularJs中route的使用方法和配置
2016/02/04 Javascript
jQuery简单实现仿京东分类导航层效果
2016/06/07 Javascript
JCrop+ajaxUpload 图像切割上传的实例代码
2016/07/20 Javascript
js实现常用排序算法
2016/08/09 Javascript
移动端日期插件Mobiscroll.js使用详解
2016/12/19 Javascript
浅析Node.js非对称加密方法
2018/01/29 Javascript
使用weixin-java-miniapp配置进行单个小程序的配置详解
2019/03/29 Javascript
JS隐藏号码中间4位代码实例
2019/04/09 Javascript
少女风vue组件库的制作全过程
2019/05/15 Javascript
JavaScript检测是否开启了控制台（F12调试工具）
2020/10/02 Javascript
[02:30]DOTA2英雄基础教程 暗影恶魔
2013/12/17 DOTA
[01:05:56]Liquid vs VP Supermajor决赛 BO 第二场 6.10
2018/07/04 DOTA
Python获取服务器信息的最简单实现方法
2015/03/05 Python
python使用multiprocessing模块实现带回调函数的异步调用方法
2015/04/18 Python
Python写的一个定时重跑获取数据库数据
2016/12/28 Python
Python用list或dict字段模式读取文件的方法
2017/01/10 Python
Python使用正则表达式实现文本替换的方法
2017/04/18 Python
Python实现字符串格式化输出的方法详解
2017/09/20 Python
Python实现自动发送邮件功能
2021/03/02 Python
Python使用Windows API创建窗口示例【基于win32gui模块】
2018/05/09 Python
opencv python 基于KNN的手写体识别的实例
2018/08/03 Python
Python Numpy 控制台完全输出ndarray的实现
2020/02/19 Python
详解基于python的图像Gabor变换及特征提取
2020/10/26 Python
CSS3 网页下拉菜单代码解释 中文翻译
2010/02/27 HTML / CSS
西班牙购买隐形眼镜、眼镜和太阳镜网站：Lentiamo.es
2020/06/11 全球购物
Ruby如何进行文件操作
2014/07/17 面试题
我的网上商城创业计划书
2013/12/26 职场文书
应届中专生自荐书范文
2014/02/13 职场文书
明星员工获奖感言
2014/08/14 职场文书
毕业生捐书活动倡议书
2015/04/27 职场文书
《童年》读后感（三篇）
2019/08/27 职场文书