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

最新推荐文章于 2024-09-05 00:31:38 发布
最新推荐文章于 2024-09-05 00:31:38 发布
阅读量2.6k 收藏 1
点赞数 1
分类专栏： 前端

一、前期准备

1、使用echarts之前先要引入echarts.js，js可以到官网下载

2、写一个div容器用来装echarts内容，这个容器必须有高度，不然看不到内容。

3、在script中获取div容器的id，根据需要写option中的参数（也许你现在还不知道option是干嘛用的，不要着急往下看），使用setoption生成图表。

（代码如下）注：后面将不再对引入js，获取id，调用option生成图表做赘述

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<!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、柱状图代码

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
<!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、折线图

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
<!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{}就可以

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
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,

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
<!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即可

代码

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
<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>

运行结果

long冰
关注
专栏目录
echarts各种图表
05-10
各种图表、折线图、柱形图等等，一些常用的图表 不管是你见过的没见过的都有
echarts3 使用总结（绘制各种图表,地图）
08-31
【ECharts3 使用详解——绘制各种图表与地图】 ECharts 是一个基于 JavaScript 的开源可视化库，广泛应用于数据可视化场景，包括但不限于柱状图、折线图、饼图以及地图等。ECharts3 是其第三个主要版本，提供了丰富...
Echarts 3使用
Chunhong Song的专栏
04-23 1322
各属性 itemStyle itemStyle用于设置通用样式，诸如阴影、透明度、颜色、边框颜色、边框宽度等； itemStyle:{ emphasis:{ shadowBlur:200,//阴影的大小 shadowOffsetX:10,//阴影水平方向上的偏移 shadowOffsetY:10,//阴影垂直方向上的偏移 ...
Echarts数据可视化教程(超详细，持续更新中
最新发布
2401_86400276的博客
09-05 1256
1.什么是数据可视化？把数据以图表(更直观)的形式展现 -->图表2.数据可视化的好处清晰有效地传达与沟通信息更好的观察隐藏在数据中的信息3.数据可视化的的实现方式报表类Excel水晶报表商业智能BIIPower BI编码类(最佳灵活、门槛高)Echarts.jsD3.jsEcharts是一个使用JavaScript实现的开源可视化库，兼容性强，底层依赖矢量图形库ZRender，提供直观，交互丰富，可高度 个性化定制的数据可视化图表。
ECharts3使用入门
daguairen的博客
05-08 4315
最近项目中有用到百度ECharts，目前版本已经到3了，很多人说百度的这个东西是他最有良心的产品，用起来要比国外的插件简单点，这里主要讲一些简单的应用，算是简单的入门级别的，如果要是想更加的深入可以去看看范例。 1.前期准备 （1）相较于以前好像使用起来更加的简单了，直接引入echarts.min.js。 （2）写一个div用来存放图表。 （3）js代码中根据div的id号获取容器，写图表
ECharts3基础教程（一）简单上手篇
BloodyMandoo的博客
06-19 3741
要使用 ECharts3 绘制简单的图形，可以分为几个简单的步骤： 一、引入 ECharts 二、为 ECharts 准备具备宽高的 DOM 容器 三、通过 echarts.init 方法初始化一个 echarts 实例并通过 setOption 方法生成一个简单的柱状图 ECharts
v3按需引入ECharts
智者劳心
04-21 788
v3按需引入ECharts 炒鸡详细易懂
echarts绘制全国地图完整代码
06-08
在“echarts绘制全国地图完整代码”这个主题中，我们将深入探讨如何使用 ECharts 来绘制中国全图，并了解相关的核心知识点。 首先，`map.html` 文件是主页面，它包含了 ECharts 地图展示的 HTML 结构。在这个文件中...
html5 echarts图表插件炫光的分布地图动画特效
09-08
然后，使用JavaScript初始化ECharts实例，并配置地图图表的相关选项，包括地图类型、数据源、炫光效果等。最后，通过调用ECharts的API方法，启动动画并实时更新数据。 在提供的压缩包文件"texiao2068_1560680784"中...
Vue 之 echarts 图表数据可视化常用的一些图表动态图表3D图表的简单整理
08-05
相关说明地址： vue 中添加 echarts ，然后在 vue 中简单使用一些 echarts中常用的图表，包括一些动态的图表、3D的图表等 ，如果有不足之处，欢迎指出，或者你有更好的方法，欢迎留言。
echarts绘制地图 json文件
02-21
使用ECharts绘制地图的基本步骤如下： 1. 引入ECharts库：在HTML文件中引入ECharts的JS文件。 2. 准备容器：在HTML中创建一个用于展示地图的div元素。 3. 初始化ECharts实例：使用`echarts.init()`方法初始化ECharts...
ECharts v3.3.2
12-03
ECharts (Enterprise Charts 商业产品图表库) 提供商业产品常用图表，底层基于ZRender（一个全新的轻量级canvas类库），创建了坐标系，图例，提示，工具箱等基础组件，并在此上构建出折线图、柱状图、散点图、K线图、饼图、雷达图、地图、和弦图、力导向布局
ECharts v3.3
12-04
ECharts (Enterprise Charts 商业产品图表库) 提供商业产品常用图表，底层基于ZRender（一个全新的轻量级canvas类库），创建了坐标系，图例，提示，工具箱等基础组件，并在此上构建出折线图、柱状图、散点图、K线图、饼图、雷达图、地图、和弦图、力导向布局
echarts的官方v3离线api
03-29
echarts的官方v3离线api, 和官方文档一致，不方便上网的小伙伴和方便
echart3下载
10-23
echart3下载，echart3 全部demo，echart3 全部demo，echart3 全部demo
echarts 统计图案例
09-13
ECharts，一个纯 Javascript 的图表库，可以流畅的运行在 PC 和移动设备上，兼容当前绝大部分浏览器（IE8/9/10/11，Chrome，Firefox，Safari等），底层依赖轻量级的 Canvas 类库 ZRender，提供直观，生动，可交互，可高度个性化定制的数据可视化图表。 ECharts 3 中更是加入了更多丰富的交互功能以及更多的可视化效果，并且对移动端做了深度的优化。ECharts 提供了常规的折线图，柱状图，散点图，饼图，K线图，用于统计的盒形图，用于地理数据可视化的地图，热力图，线图，用于关系数据可视化的关系图，treemap，多维数据可视化的平行坐标，还有用于 BI 的漏斗图，仪表盘，并且支持图与图之间的混搭。 你可以在下载界面下载包含所有图表的构建文件，如果只是需要其中一两个图表，又嫌包含所有图表的构建文件太大，也可以在在线构建中选择需要的图表类型后自定义构建。
vue echarts3
加加加菲猫
09-28 708
安装echarts cnpm install --save vue-echarts-v3 新建一个一个通用的折线图组件  line.vue import IEcharts from 'vue-echarts-v3' // 导入IEcharts组件 export default { props: { obj: null }, data
echarts图表静态数据 象形柱形图、折线图、日历饼图、饼状图四种实现
xiaoming4965的博客
08-31 890
echarts图表静态数据 象形柱形图、折线图、日历饼图、饼状图四种实现
echarts3 图表配置小总结
wangdan_2013的博客
08-23 344
echarts3图表的样式，平均值，图表混排，样式属性
echarts3实战：全面解析柱状图、折线图、饼图及地图绘制
本文是对echarts3的使用总结，主要讲解如何利用它来绘制各种图表和地图。Echarts 是一个基于 JavaScript 的数据可视化库，提供了丰富的图表类型，如柱状图、折线图、饼图等，并且支持地图的绘制，适用于Web应用中...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值