H5 Echarts可视化图表的使用-白红宇

获取 ECharts

有4种方法，在Echarts官网的有简单且详细说明。如：1、从选择你需要的版本下载

引入 ECharts

ECharts 3 开始不再强制使用 AMD 的方式按需引入，代码里也不再内置 AMD 加载器。因此引入方式简单了很多，只需要像普通的 JavaScript 库一样用 script 标签引入。

    
        
        复制代码

绘制一个简单的图表

在绘图前我们需要为 ECharts 准备一个具备高宽的 DOM 容器。

然后就可以通过 echarts.init 方法初始化一个 echarts 实例并通过 setOption 方法生成一个简单的柱状图，下面是完整代码。

这样你的第一个图表就诞生了！

你也可以直接进入中查看编辑示例

以上是最简单的配置，下面主要说一下常用的配置项

以折线图为例子

直接先上代码,配置代码

var data = [["2000-06-05 1",116],["2000-06-05 8",196],["2000-06-05 10",1],["2000-06-06 10",129],["2000-06-07 10",135],["2000-06-08 10",86],["2000-06-09 10",73],["2000-06-10 5",85],["2000-06-10 6",185],["2000-06-10 7",5],["2000-06-11 10",73],["2000-06-12 10",68],["2000-06-13 10",92],["2000-06-14 10",130],["2000-06-15 10",245],["2000-06-16 10",139]];var dateList = data.map(function (item) {	return item[0];});var valueList = data.map(function (item) {	return item[1];});option = {	title: {		left: 'center',		text: '健康关注指数',		subtext: '',		top: 0,		textStyle:{			color: '#07d2b8',			fontSize: 30,			fontWeight: 'bold',		}	},	grid: {		top: 110,	},	tooltip: {		trigger: 'axis',		axisPointer: {			type: 'cross',			animation: false,			label: {				fontSize: 18,				backgroundColor: '#07d2b8',				borderColor: '#aaa',				borderWidth: 1,				shadowBlur: 0,				shadowOffsetX: 0,				shadowOffsetY: 0,				textStyle: {					color: '#fff'				}			}		},	},	xAxis: {		show: true,		data: dateList,		splitNumber : 7,		axisLabel:{			fontSize: 18,			// rotate: 20,			formatter: function (value, idx) {				var date = new Date(value);				// return idx === 0 ? value : [date.getMonth() + 1, date.getDate()].join('-')+ ` ` + date.getHours()				return idx === 0 ? value : value			}		},		boundaryGap: false,		name: '时间',		nameLocation: 'end',		nameTextStyle:{			color: '#333',			fontSize: 20,			fontWeight: 'bold',		},	},	yAxis: {		show: true,		splitLine: {show: false},		axisLabel:{			fontSize: 18,		},		name: '关注指数',		nameLocation: 'end',		nameTextStyle:{			color: '#333',			fontSize: 20,			fontWeight: 'bold',		},		nameGap: 60,	},	series: [{		type: 'line',		lineStyle: {			color: '#07d2b8',			width: 3,		},		itemStyle:{			color:'#fff',			borderColor :'#07d2b8',			borderWidth : 3,		},		label: {			normal: {				color: '#07d2b8',				fontSize: 20,				show: true,				position: 'top'			}		},		markPoint: {			symbol: 'roundRect',			symbolOffset: [0,-40],			data: [				{					type: 'max',					name: '最高值',					// value :'最高',				},				{					type: 'min', 					name: '最低值',					// symbolOffset: [0,40],				},			],			label: {				normal: {					color: '#07d2b8',					fontSize: 20,				},			},			itemStyle:{				color:'#fff',				shadowColor :'#999',				shadowBlur: 1,				shadowOffsetX: 2,				shadowOffsetY: 2,			},			symbolSize: 55,		},		areaStyle: {			normal: {				color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{					offset: 0,					color: 'rgba(7, 210, 184, 0.8)'				}, {					offset: 1,					color: '#fff'				}])			}		},		symbolSize: 20,		hoverAnimation: false,		data: valueList	}]};// 基于准备好的dom，初始化echarts实例var myChart = echarts.init(document.getElementById('tendencyChart'));// 使用刚指定的配置项和数据显示图表。myChart.setOption(option);复制代码

效果图：

常用配置项

title 标题设置/可不设置则不显示 grid: 整体图的偏移 tooltip: 提示框组件 xAxis: 坐标轴X轴

data: X轴显示数据

axisLabel：X轴下标文字的格式

boundaryGap：坐标轴两边留白策略，类目轴和非类目轴的设置和表现不一样。

name: X轴名称

nameLocation： X轴名称位置

yAxis：坐标轴Y轴,其他配置同X轴一样

nameGap：Y轴名称的偏移值

series：系列列表。每个系列通过 type 决定自己的图表类型

type: 'line', 折线图图表

lineStyle：折线图的线的设置

itemStyle: 折线拐点标志的样式

label: 折线拐点文字设置

markPoint：图表标注，图表标记。
- symbol: 'roundRect'，标记的图形。ECharts 提供的标记类型包括 'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow'
- symbolOffset：标记相对于原本位置的偏移
- data: 可以是标记最大值、最小值、某个坐标、某个屏幕坐标、固定X像素位置等等
- label：标记文字设置
- itemStyle：标记的图形的样式设置
- symbolSize：标记图形的大小

areaStyle：区域填充样式。如区域渐变等 data：可以在这里指定Y轴的数据。注意，如果系列没有指定 data，并且 option 有 dataset，那么默认使用第一个 dataset。如果指定了 data，则不会再使用 dataset。