H5 Echarts可视化图表的使用

5,284 阅读5分钟

Echarts官网

获取 ECharts

有4种方法,在Echarts官网的5分钟上手Echarts有简单且详细说明。 如:1、从官网下载界面选择你需要的版本下载

引入 ECharts

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

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <!-- 引入 ECharts 文件 -->
    <script src="echarts.min.js"></script>
</head>
</html>

绘制一个简单的图表

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

<body>
    <!-- 为 ECharts 准备一个具备大小(宽高)的 DOM -->
    <div id="main" style="width: 600px;height:400px;"></div>
</body>

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

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>ECharts</title>
    <!-- 引入 echarts.js -->
    <script src="echarts.min.js"></script>
</head>
<body>
    <!-- 为ECharts准备一个具备大小(宽高)的Dom -->
    <div id="main" style="width: 600px;height:400px;"></div>
    <script type="text/javascript">
        // 基于准备好的dom,初始化echarts实例
        var myChart = echarts.init(document.getElementById('main'));

        // 指定图表的配置项和数据
        var option = {
            title: {
                text: 'ECharts 入门示例'
            },
            tooltip: {},
            legend: {
                data:['销量']
            },
            xAxis: {
                data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
            },
            yAxis: {},
            series: [{
                name: '销量',
                type: 'bar',
                data: [5, 20, 36, 10, 10, 20]
            }]
        };

        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
    </script>
</body>
</html>

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

enter description here

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

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

以折线图为例子

直接先上代码,配置代码

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。