Echarts学习笔记

Echarts 的基本运用（附上官方文档链接）

一、经典案例

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 
 4 <head>
 5     <meta charset="UTF-8">
 6     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 7     <meta http-equiv="X-UA-Compatible" content="ie=edge">
 8     <title>Echart</title>
 9     <!-- 引入 echarts.js -->
10     <script src="../echarts/dist/echarts.js"></script>
11     <!-- <script src="../echarts/echarts.all.js"></script> -->
12 </head>
13 
14 <body>
15 
16     <body>
17         <!-- Echarts 准备一个具备大小的Dom -->
18         <div id="main" style=" 600px; height:400px;"></div>
19     </body>
20 </body>
21 <script>
22     // 基于准备好的dom，初始化echats实例
23     var myChart = echarts.init(document.getElementById('main'));
24 
25     // 指定图标的配置项和数据
26     var option = {
27         title: {
28             text: 'Echarts 入门示例'
29         },
30         tooltip: {},
31         legend: {
32             data: ['销量']
33         },
34         xAxis: {
35             data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"]
36         },
37         yAxis: {
38 
39         },
40         series: [{
41             name: '销量',
42             type: 'bar',
43             data: [5, 20, 36, 10, 10, 20],
44         }]
45     }
46 
47     // 使用刚指定的配置项和数据显示出来
48     myChart.setOption(option);
49 </script>
50 
51 </html>

View Code

二、复习案例（整合了 n 个知识点，由代码记）

  1 <!DOCTYPE html>
  2 <html lang="en">
  3 
  4 <head>
  5     <meta charset="UTF-8">
  6     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7     <meta http-equiv="X-UA-Compatible" content="ie=edge">
  8     <title>echarts</title>
  9     <!-- 导入 echart.js -->
 10     <script src="../echarts/dist/echarts.js"></script>
 11     <style>
 12         * {
 13             margin: 0;
 14             padding: 0;
 15         }
 16 
 17         #div1 {
 18             display: flex;
 19             flex-flow: row wrap;
 20             width: 1240px;
 21             height: 840px;
 22             margin: 60px auto;
 23         }
 24 
 25         #div div {
 26             flex: 1;
 27         }
 28     </style>
 29 </head>
 30 
 31 <body>
 32     <div id="div1">
 33         <!-- 创建 一个 宽 600 高 400 的区域 -->
 34         <div id="main" style=" 600px; height: 400px;"></div>
 35         <div id="H1" style=" 600px;height: 400px;"></div>
 36         <!-- 示例 三 -->
 37         <div id="H2" style=" 600px; height: 400px;"></div>
 38         <!-- 示例四 对象到图形的映射 encode -->
 39         <div id="H3" style=" 600px; height: 400px;"></div>
 40     </div>
 41 </body>
 42 <script>
 43     // 基于准备好的 dom，初始化 echarts实例
 44     // 补充：echarts4 开始，新增了两套主题：'light', 'dark'
 45     var myChart = echarts.init(document.getElementById("main"), 'dark');
 46 
 47     // 指定图标的配置项和数据
 48     var option = {
 49         // 全局调色盘，当然也可以进行局部 series里的调色盘
 50         color: ['#c23531', '#2f4554', '#61a0a8', '#d48265', '#91c7ae', '#749f83', '#ca8622', '#bda29a', '#6e7074',
 51             '#546570', '#c4ccd3'
 52         ],
 53         xAxis: {
 54             type: 'category'
 55         },
 56         yAxis: {},
 57         dataset: {
 58             source: [
 59                 ['Jan', 34, 20, 'XX', 52],
 60                 ['Feb', 28, 14, 'YY', 54],
 61                 ['Mar', 45, 32, 'ZZ', 42],
 62                 ['Apr', 69, 46],
 63                 ['May', 39, 24],
 64                 ['Jun', 43, 23],
 65                 ['Jul', 33, 23],
 66                 ['Aug', 23, 13],
 67                 ['Sep', 33, 20],
 68                 ['Oct', 33, 20],
 69                 ['Nov', 39, 24],
 70                 ['Dec', 22, 15]
 71             ]
 72         },
 73         series: [{
 74                 type: 'pie',
 75                 center: ['65%', 60],
 76                 radius: 35,
 77                 encode: {
 78                     itemName: 3,
 79                     value: 4
 80                 }
 81             }, {
 82                 type: 'line',
 83                 encode: {
 84                     x: 0,
 85                     y: 1
 86                 }
 87             },
 88             {
 89                 type: 'bar',
 90                 encode: {
 91                     x: 0,
 92                     y: 2
 93                 }
 94             }
 95         ]
 96     };
 97     // 将刚指定的数据和配置项显示出来
 98     myChart.setOption(option);
 99 
100     // dom
101     var H1 = document.getElementById("H1");
102     // echarts
103     var mychart1 = echarts.init(H1);
104     // option 直接挂着
105     mychart1.setOption({
106         // 全局背景色
107         backgroundColor: '#2c343c',
108         // 全局文本样式
109         textStyle: {
110             color: 'rgba(255, 255, 255, 0.3)',
111         },
112         // 饼图视觉引导线的颜色
113         labelLine: {
114             lineStyle: {
115                 color: 'rgba(255, 255, 255, 0.3)'
116             }
117         },
118 
119         series: [{
120             name: "访问来源",
121             type: 'pie',
122             radius: '55%',
123             data: [{
124                     value: 235,
125                     name: "视频广告",
126                     // 每个扇形的颜色，可以分别设置data下的数据项实现
127                     itemStyle: {
128                         // color: '#c23531',
129                     }
130                 },
131                 {
132                     value: 274,
133                     name: "联盟广告"
134                 },
135                 {
136                     value: 310,
137                     name: "邮件营销"
138                 },
139                 {
140                     value: 335,
141                     name: "直接访问"
142                 },
143                 {
144                     value: 400,
145                     name: "搜索引擎"
146                 },
147             ],
148             // 南丁格尔图
149             roseType: 'angle',
150             // 阴影配置
151             itemStyle: {
152                 // 阴影的大小
153                 shadowBlur: 200,
154                 // 阴影水平方向上的偏移
155                 shadowOffsetX: 0,
156                 // 阴影垂直方向上的偏移
157                 shadowOffsetY: 0,
158                 // 阴影颜色
159                 shadowColor: 'rgba(0, 0, 0, 0.5)',
160 
161                 // itemStyle 的 emphasis 是鼠标 hover时候的高亮样式
162                 emphasis: {
163                     shadowBlur: 200,
164                     shadowColor: 'rgba(0, 0, 0, 0.5)'
165                 },
166                 // 设置扇形颜色
167                 color: '#c23531',
168             },
169 
170 
171 
172         }],
173 
174         // 由于都为一个颜色，只有明暗度的变化，更快捷的方式是通过 visualMap 组件 将数值的大小映射到 明暗度上
175         visualMap: {
176             // 不显示 visualMap 组件，只用于明暗度的映射
177             show: false,
178             // 映射的最小值为 80
179             min: 80,
180             // 映射的最大值为 600
181             max: 600,
182             inRange: {
183                 // 明暗度的范围是 0 到 1
184                 colorLightness: [0, 1],
185             }
186         },
187     })
188 
189     // 使用 dataset 管理数据
190     var H2 = document.getElementById("H2");
191     // 初始化
192     var mychart2 = echarts.init(H2, 'dark');
193     // option
194     mychart2.setOption({
195         legend: {},
196         tooltip: {},
197         dataset: {
198             source: [
199                 ['product', '2012', '2013', '2014', '2015'],
200                 ['Matcha Latte', 41.1, 30.4, 65.1, 53.3],
201                 ['Milk Tea', 86.5, 92.1, 85.7, 83.1],
202                 ['Cheese Cocoa', 24.1, 67.2, 79.5, 86.4]
203             ]
204         },
205         xAxis: [{
206                 type: 'category',
207                 gridIndex: 0
208             },
209             {
210                 type: 'category',
211                 gridIndex: 1
212             }
213         ],
214         yAxis: [{
215                 gridIndex: 0
216             },
217             {
218                 gridIndex: 1
219             }
220         ],
221         grid: [{
222                 bottom: '55%'
223             },
224             {
225                 top: '55%'
226             }
227         ],
228         series: [
229             // 这几个系列会在第一个直角坐标系中，每个系列对应到 dataset 的每一行。
230             {
231                 type: 'bar',
232                 seriesLayoutBy: 'row'
233             },
234             {
235                 type: 'bar',
236                 seriesLayoutBy: 'row'
237             },
238             {
239                 type: 'bar',
240                 seriesLayoutBy: 'row'
241             },
242             // 这几个系列会在第二个直角坐标系中，每个系列对应到 dataset 的每一列。
243             {
244                 type: 'bar',
245                 xAxisIndex: 1,
246                 yAxisIndex: 1
247             },
248             {
249                 type: 'bar',
250                 xAxisIndex: 1,
251                 yAxisIndex: 1
252             },
253             {
254                 type: 'bar',
255                 xAxisIndex: 1,
256                 yAxisIndex: 1
257             },
258             {
259                 type: 'bar',
260                 xAxisIndex: 1,
261                 yAxisIndex: 1
262             }
263         ]
264     });
265     // dom
266     var H3 = document.getElementById("H3");
267     mychart3 = echarts.init(H3, 'dark');
268     mychart3.setOption({
269         dataset: {
270             source: [
271                 ['score', 'amount', 'product'],
272                 [89.3, 58212, 'Matcha Latte'],
273                 [57.1, 78254, 'Milk Tea'],
274                 [74.4, 41032, 'Cheese Cocoa'],
275                 [50.1, 12755, 'Cheese Brownie'],
276                 [89.7, 20145, 'Matcha Cocoa'],
277                 [68.1, 79146, 'Tea'],
278                 [19.6, 91852, 'Orange Juice'],
279                 [10.6, 101852, 'Lemon Juice'],
280                 [32.7, 20112, 'Walnut Brownie']
281             ]
282         },
283         xAxis: {},
284         yAxis: {
285             type: 'category'
286         },
287         series: [{
288             type: 'bar',
289             encode: {
290                 // 将 "amount" 列映射到 X 轴。
291                 x: 'amount',
292                 // 将 "product" 列映射到 Y 轴。
293                 y: 'product'
294             }
295         }]
296     })
297 </script>
298 
299 </html>

View Code

LovelyCat

相关阅读:
ios-UserDefaults
ios-滚动视图滚动取消键盘
 ios-获取商店已上线app信息
 ios-WKWebView 拨打电话
 ios-获取通讯录姓名和电话
 ios-model数据结构
 ios-改变button四个角的弧度
 ios-高德、百度后台定位并上传服务器
 ios-系统警告框跳转到设置里面
 Java精讲：生产者-消费者
原文地址：https://www.cnblogs.com/xmdykf/p/12266442.html