echarts的初级学习及其使用

为了参加一个比赛，就倒腾了echarts怎样使用，对于其中的一些小技巧，记录下来，一以便在以后的使用中能够更加的方便，这就是一个积累的过程，而不是如这次一般 ，满世界的去寻找相应的设置方法，而其中学期最好的还是官方的教程，但是，官方的教程、api等太多，而以自己喜欢的方法，掌握的东西，这样的记录，更加的明白自己掌握的及之后的前进。

成型的东西如下：不是很好，但在视觉上还是值得一看。

这其中，有很多需要调整的一些地方，虽说入门简单，但是调整的东西也不算少。

接下来，我就记录一下，我下做这个的时候，遇到的一些小技巧。

var myChart = echarts.init(document.getElementById('second'));
//初始化，创建一个容器

var option = {}//设置配置项

myChart.setOption(option);
if(option && typeof option === "object") {
	myChart.setOption(option, true);
}
//将设置好的配置项配置在容器里

这是一个完成一个基本的echarts该有的三步，其中最为繁琐的就是option里面的东西。

以地图为例：其实，不难，一看就能看出来。

var option = {
		title: {
			text: '贵州省2018年常驻人口',
			subtext: '2018年贵州省常驻人口总数为:3600万人',
			textStyle: {//设置标题的颜色和字体大小
			    color: "#ffffff",
				fontSize: 20
				    },
			subtextStyle: {//设置副标题字体大小
				fontSize: 17
					},
				top: "5%",//标题显示的位置top,bottom，left,right
				left: 'center',

					},

			     visualMap: {//设置在地图上通过一个小图标能够更加的容易的观察
				    min: 200,//小图标的最小值
					max: 700,//小图标的最大值
					text: ['High', 'Low'],
					textStyle: {
					color: '#ffffff'
					},
					realtime: false,
					calculable: true,//能否可以拖拽
					inRange: {
					color: ['lightskyblue', 'yellow', 'orangered']//设置小图标的三种颜色
					    }
					},
				    tooltip: {//能在显示地图上显示提示
					trigger: 'item',
                    //'item'：数据项图形触发，主要在散点图，饼图等无类目轴的图表中使用。
                    //'axis':坐标轴触发，主要在柱状图，折线图等会使用类目轴的图表中使用。
                    //'none':什么都不触发。
					formatter: '{b}<br/>{c} 万人'
                    //提示框浮层内容显示出来的格式，支持字符串模板和回调函数两种形式。
                    //模板变量有 {a}, {b}，{c}，分别表示系列名，数据名，数据值等
					},
					grid: {//调整整个地图在页面上的大小、高矮
					top: 0,
					bottom: 0,
					},
                    //要有series才能显示出要显示出的东西
					series: [{
					name: '数据名称',
					type: 'map',
					mapType: '贵州',//可以是其他省，国家，全世界
					selectedMode: 'single',
					itemStyle: {
					normal: {
					label: {
					show: true
							}
						},
						emphasis: {//高亮
							label: {
								show: true,
								}
							}
						},
                    //要显示的数据
					data: [{
						name: '贵阳市',
						value: 488.19

						},
						{
						name: '遵义市',
						value: 627.07
						},
						{
						name: '六盘水市',
						value: 293.73
						},
						{
						name: '毕节市',
						value: 668.61
						},
						{
						name: '铜仁市',
						value: 316.88
						},
						{
						name: '安顺市',
						value: 235.31
						},
						{
						name: '黔西南州',
						value: 287.317
						},
						{
						name: '黔东南州',
						value: 353.83

						},
						{
						name: '黔南州',
						value: 329.21
						},
						]
					}]
				};

柱状图：

//legend里面的‘高等教育毛入学率’和series里面的name要一致，不然不能显示出来选项的legend
legend: {
		data: ['高等教育毛入学率（%）', '出生率(%)', '死亡率(%)', '农林牧渔业增加值(%)'],
		textStyle: {
		color: "#ffffff"
				},
		x: "center",
		itemGap: 8,
		y: "85%"

		},
		toolbox: {//工具箱
        show: true,//显示工具箱
        feature: {
        dataZoom: {
        yAxisIndex: 'none'
        },
        dataView: {readOnly: false},
        magicType: {type: ['line', 'bar']},//能够调整为折线图和饼图
        restore: {},//刷新
        saveAsImage: {}//保存图片
          }
         },
	    grid: {
		top: '12%',
		left: '3%',
		right: '4%',
		bottom: '20%',
		containLabel: true
		},
	    xAxis: [{//x轴
		type: 'category',
		boundaryGap: false,
		data: ['2013年', '2014年', '2015年', '2016年', '2017年'],
		axisLabel: {//调整轴上的颜色
		show: true,
		textStyle: {
		color: '#fff'
		}
		}
		}],
		yAxis: [{
		type: 'value',
		axisLabel: {
		show: true,
		textStyle: {
		color: '#fff'
			}
		}
		}],
	    series: [{
		name: '高等教育毛入学率（%）',
		type: 'line',
		stack: '总量',
		areaStyle: {},
		data: [27.4, 29.4, 31.2, 33.0, 34.0]
	    },
		{
		name: '出生率(%)',
		type: 'line',
		stack: '总量',
		areaStyle: {},
		data: [13.05, 12.98, 13, 13.43, 13.98]
		},
		{
		name: '死亡率(%)',
		type: 'line',
		stack: '总量',
		areaStyle: {},
		data: [6.93, 6.96, 7.15, 7.18, 7.2]
		},
		{
		name: '农林牧渔业增加值(%)',
		type: 'line',
		stack: '总量',
		areaStyle: {
		normal: {}
		},
		data: [5.8, 6.5, 6.4, 5.9, 6.2]
		},
		]
		};

series: [{
		name: 'GDP(亿元)',
		type: 'bar',
		itemStyle: { //配置样式，设置每个柱子的颜色
		normal: {
		color: '#4D4DB3'
		}
		}
},
}

itemStyle: { //配置样式，设置每个柱子的颜色
		normal: {
		color: '#FFCC00',
	    lineStyle: {
	    width: 6, //折线宽度
		color: '#3199DF', //折线颜色
		}
		}
},

barWidth: 30,//设置柱状图的宽度

可以在 https://github.com/perseverancebg/Visualizing.git或者是https://download.csdn.net/download/wen123abx/11800522下载源码。