首页
所有分类
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 相关文章推荐
jQuery(1.6.3) 中css方法对浮动的实现缺陷分析
Sep 09 Javascript
JS实现点击颜色块切换指定区域背景颜色的方法
Feb 25 Javascript
JQuery实现样式设置、追加、移除与切换的方法
Jun 11 Javascript
简述Jquery与DOM对象
Jul 10 Javascript
JavaScript中用let语句声明作用域的用法讲解
May 20 Javascript
BootStrap入门教程(二)之固定的内置样式
Sep 19 Javascript
从setTimeout看js函数执行过程
Dec 19 Javascript
基于JavaScript实现幸运抽奖页面
Jul 05 Javascript
VueCli3构建TS项目的方法步骤
Nov 07 Javascript
JS使用canvas中的measureText方法测量字体宽度示例
Feb 02 Javascript
vue 实现用户登录方式的切换功能
Apr 14 Javascript
解决vuex刷新数据消失问题
Nov 12 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
mediapipe(1) cvzone(1) 事件调度器(1) for(1) 分词器(1) 计算机视觉(2) while(1) okenizer(1) 无限迭代(1) re模块(2)
You might like
用PHPdig打造属于你自己的Google[图文教程]
2007/02/14 PHP
自动把纯文本转换成Web页面的php代码
2009/08/27 PHP
PHP调用MsSQL Server 2012存储过程获取多结果集(包含output参数)的详解
2013/07/03 PHP
PHP5中使用mysqli的prepare操作数据库的介绍
2019/03/18 PHP
漂亮的提示信息（带箭头）
2007/03/21 Javascript
关于 byval 与 byref 的区别分析总结
2007/10/08 Javascript
jQuery Ajax使用 全解析
2010/12/15 Javascript
圣诞节Merry Christmas给博客添加浪漫的下雪效果基于jquery实现
2012/12/27 Javascript
让alert不出现弹窗的两种方法
2014/05/18 Javascript
node.js下LDAP查询实例分享
2015/09/30 Javascript
全面解析JavaScript中“&amp;&amp;”和“||”操作符(总结篇)
2016/07/18 Javascript
javascript设计模式Constructor（构造器）模式
2016/08/19 Javascript
JQuery EasyUI的一些常用组件
2017/07/12 jQuery
浅谈express 中间件机制及实现原理
2017/08/31 Javascript
JS一个简单的注册页面实例
2017/09/05 Javascript
详解node单线程实现高并发原理与node异步I/O
2017/09/21 Javascript
parabola.js抛物线与加入购物车效果的示例代码
2017/10/25 Javascript
Vue三种常用传值示例(父传子、子传父、非父子)
2018/07/24 Javascript
vue webpack开发访问后台接口全局配置的方法
2018/09/18 Javascript
详解Vscode中使用Eslint终极配置大全
2019/11/08 Javascript
JS如何生成随机验证码
2020/03/02 Javascript
Element Input输入框的使用方法
2020/07/26 Javascript
浅谈vue中$event理解和框架中在包含默认值外传参
2020/08/07 Javascript
[01:00:35]2018DOTA2亚洲邀请赛3月30日B组 EffcetVSMineski
2018/03/31 DOTA
Python面向对象之继承和组合用法实例分析
2018/08/27 Python
详解Django CAS 解决方案
2019/10/30 Python
dpn网络的pytorch实现方式
2020/01/14 Python
python中Pexpect的工作流程实例讲解
2021/03/02 Python
商务考察邀请函范文
2014/01/21 职场文书
2014标准社保办理委托书
2014/10/06 职场文书
Python离线安装openpyxl模块的步骤
2021/03/30 Python
Python如何识别银行卡卡号?
2021/06/10 Python
Python面向对象之内置函数相关知识总结
2021/06/24 Python
python中if和elif的区别介绍
2021/11/07 Python
聊聊mysql都有哪几种分区方式
2022/04/13 MySQL
速龙x4-860k处理器相当于i几
2022/04/20 数码科技