Echarts相关

最新推荐文章于 2024-02-22 13:49:02 发布

我不搞基

最新推荐文章于 2024-02-22 13:49:02 发布

阅读量243

点赞数

分类专栏：不知道怎么分类呀

本文链接：https://blog.csdn.net/fugitive1/article/details/102641787

版权

不知道怎么分类呀专栏收录该内容

3 篇文章 0 订阅

订阅专栏

Echarts相关

1 前言
2 Echarts的导入
3 官方例子
4 画图样例详解

1 前言

前一段时间工程实践用到了前端的Echarts框架来画图，这里记录一下相关的知识，用于查漏补缺。

2 Echarts的导入

第一步：打开官网点击Tutorial；
在这里插入图片描述
第二步：下载；

在第一步之后点击online build tool，然后，勾选想要的功能，拖到滑到最下面点击Download。

第三步：导入；

3 官方例子

步骤
第一步：为Echarts画图创建DOM容器；

	<body>
		<!-- preparing a DOM with width and height for ECharts -->
		<div id="main" style="width:600px; height:400px;"></div>
	</body>

第二步：编写脚本画图；
脚本通用写法：
（1）、通过刚刚创建的DOM容器创建一个echarts对象 var myChart = echarts.init(document.getElementById(‘main’));，
（2）、然后写配置项var option={…}配置项可以查看官方API；
（3）、最后将配置项放入创建的echarts对象， myChart.setOption(option);
完整代码如下：

<script type="text/javascript">
        // based on prepared DOM, initialize echarts instance
        var myChart = echarts.init(document.getElementById('main'));

        // specify chart configuration item and data
        var option = {
            title: {
                text: 'ECharts entry example'
            },
            tooltip: {},
            legend: {
                data:['Sales']
            },
            xAxis: {
                data: ["shirt","cardign","chiffon shirt","pants","heels","socks"]
            },
            yAxis: {},
            series: [{
                name: 'Sales',
                type: 'bar',
                data: [5, 20, 36, 10, 10, 20]
            }]
        };

        // use configuration item and data specified to show chart
        myChart.setOption(option);
    </script>

第三步：运行查看结果；
在这里插入图片描述

4 画图样例详解

4.1 官网例子详解

Echarts画图的三步中，第一步跟最后一步都是完全相同的，仅有第二步有变化，即仅有配置项的变化。
如下是对官网例子的配置项详解，也可以参考官网配置项手册学习：

        var option = {
            title: {  // 用于Echarts图标设置标题相关的属性
                text: 'ECharts entry example' // text子属性用于设置图的题目，见图4-1
            },
            tooltip: {}, //用于设置工具提示相关属性，使用show属性来开关这个功能，默认show:true，
            				//show: true的时候见图4-2，show:false的时候见图4-3
            legend: {
                data:['Sales']// 具体见图4-4，用于设置这个相关属性
            },
            xAxis: {
                data: ["shirt","cardign","chiffon shirt","pants","heels","socks"] // 用于设置x轴相关属性
            },
            yAxis: {},// 用于设置y轴相关属性
            series: [{
                name: 'Sales',// 这个属性必须要和legend.data一样，才有效，并且会触发tooltip，见图4-2上面显示的“Sales”
                type: 'bar', //用于设置图的类型
                data: [5, 20, 36, 10, 10, 20]//数据
            }]
        };

图4-1
图4-1
图4-2
图4-2 鼠标放在上面可以显示
图4-3
图4-3 鼠标放在上面没反应
4-4

4.2 Echarts全国地图详解

这一小节说一下全国地图详细解释，不过之前解释过的属性就不在注释；画地图步骤：1、先获取数据，获取数据可以由阿里云的地图选择器上获取；2、注册地图；

			$.getJSON('res/china.json', function(data, status) {// 利用jQuery获取和解析数据
				echarts.registerMap('china', data); //注册地图，第一个参数为任意字符串，后面会用到，第二个参数为地图的geojson格式的数据
				var optdata = []; //创建数据列表
				for(i = 0; i < data.features.length; i++) {// 将获取到的geojson放入数据列表列表，并对每个地区随机生成值，如果仅仅画地图的话，可以忽略此操作
					optdata.push({
						name: data.features[i].properties.name,
						value: Math.floor(Math.random() * 100)
					})
				};
				option = {
					backgroundColor: '#000', //设置容器背景
					title: {
						text: "全国地图",
						left: 'center',//图的标题居中
						textStyle: {
							color: '#fff' //设置标题字体颜色 
						}
					},
					tooltip: {
						trigger: 'item' //触发方式为item
					},
					visualMap: { // 设置visulMap见图4-5
						show: true, // 打开visualmap
						x: 'left', //visualMap的位置水平方向靠左
						y: 'center',//visualMap的位置垂直方向居中
						type: 'piecewise',//visualMap的类型
						pieces: [{//visualMap类别设置
								gt: 80,
								lte: 100,//>80,<=100
								color: 'rgba(54, 73, 140, 1)'
							},
							{
								gt: 60,
								lte: 80,
								color: 'rgba(85, 73, 126, 1)'
							},
							{
								gt: 40,
								lte: 60,
								color: 'rgba(26, 53, 107, 1)'
							},
							{
								gt: 20,
								lte: 40,
								color: 'rgba(127, 66, 108, 1)'
							},
							{
								gt: 0,
								lte: 20,
								color: 'rgba(79, 160, 232, 1)'
							}
						],
					},
					series: [{
						name: '数据',
						type: 'map',//画图的类型
						mapType: 'china',//上面注册地图时候设置的字符串
						roam: true,//开启缩放
						// label跟itemStyle用在这里主要调节当鼠标置于地图上某一区域时候的变化见图4-6、4-7
						label: {
							normal: {
								show: true,
								textStyle: {
									color: '#1A1B1C'
								}
							},
							emphasis: {
								show: true,
								textStyle: {
									color: '#ffdec9'
								}
							}
						},
						itemStyle: {
							normal: {
								areaColor: '#132937',
								borderColor: '#0692a4',
								opacity: 0.7,
							},
							emphasis: {
								areaColor: '#0b1c2d'
							},
						},
						data: optdata //数据
					}]
				};
				//初始化echarts实例 
				var myChart = echarts.init(document.getElementById('main'));
				//使用制定的配置项和数据显示图表 
				myChart.setOption(option);
			});

图4-5 visual map

图4-6 鼠标未放上去

图4-7 鼠标放上去之后
总体效果如图4-8：

图4-8 总体效果

4.3 折线图详解

			option = {
				backgroundColor: '#000',
				title: {
					text: '折线图',
					textStyle: {
						"fontSize": 12,
						"color": 'white'
					},
					left: 15,
				},
				tooltip: {
					trigger: 'axis'
				},
				// 设置图在容器的位置
				grid: {
					top: 30,
					bottom: 20,
					right: 30,
				},
				xAxis: [{
					type: 'category',
					splitLine: {
						show: false
					},
					boundaryGap: false,
					// x轴刻度
					data: [0, 1, 2, 3, 4, 5, 6],
					nameTextStyle: {
						color: 'white'
					},
					// 轴刻度
					axisTick: {
						lineStyle: {
							color: 'white',
						}
					},
					// 轴
					axisLine: {
						lineStyle: {
							color: 'white'
						}
					},
					// 轴标签
					axisLabel: {
						color: 'white',
						fontSize: 8
					}
				}],
				yAxis: [{
					splitLine: {
						show: false
					},
					type: 'value',
					// 轴标签
					axisLabel: {
						color: 'white',
						fontSize: 8
					},
					// 轴刻度
					axisTick: {
						lineStyle: {
							color: 'white',
						}
					},
					// 轴
					axisLine: {
						lineStyle: {
							color: 'white'
						}
					},
				}],
				series: [{
					name: '',
					type: 'line',
					smooth: true,
					data: [100, 20, 40, 60, 80, 100, 20],
					itemStyle: {
						normal: {
							lineStyle: {
								color: 'white'
							}
						}
					},
				}]
			};
			var dom = document.getElementById("main");
			var myChart = echarts.init(dom);
			myChart.setOption(option);

上述代码效果如图4-9：
图4-9
图4-9 折线图

我不搞基

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Echarts相关

1 前言前一段时间工程实践用到了前端的Echarts框架来画图，这里记录一下相关的知识，用于查漏补缺。2 Echarts的导入第一步：打开官网点击Tutorial；第二步：下载；在第一步之后点击online build tool，然后，勾选想要的功能，拖到滑到最下面点击Download。第三步：导入；3 官方例子步骤第一步：为Echarts画图创建DOM容器；...
复制链接

扫一扫