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

来源：互联网发布：mac wine怎么用编辑：程序博客网时间：2024/05/29 16:44

一、前期准备

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
 varmyChart = 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>
 varmyChart = 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>
  varmyChart13 = echarts.init(document.getElementById('pic4'));
  vardata = [];
  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">
  varmyChart = echarts.init(document.getElementById('main'),'shine');
    functionrandomData() {
   returnMath.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) {
           varcolorList = [
            '#C1232B','#B5C334','#FCCE10','#E87C25','#27727B',
            '#FE8463','#9BCA63','#FAD860','#F3A43B','#60C0DD',
            '#D7504B','#C6E579','#F4E001','#F0805A','#26C0C0'
           ];
           returncolorList[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>
 varmyChart = echarts.init(document.getElementById('main'));
 varoption = {
  title: {
   text : '北京地图',
   subtext : '-。-'
  },
  tooltip : {
   trigger:'item',
   formatter:function(a){
    returna[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>

运行结果

1 0