H5 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>
复制代码

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

你也可以直接进入 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。

H5 Echarts可视化图表的使用

获取 ECharts

引入 ECharts

绘制一个简单的图表

以折线图为例子

常用配置项

大数据魔镜怎么使用（国内免费的数据可视化软件推荐）

使用tensorboard可视化loss和acc的实例

h5中类jQuery选择器querySelector的使用解析

在vue中使用echarts图表实例代码详解

mysql管理软件有什么（免费的mysql可视化工具使用方法）

使用Python导出Excel图表以及导出为图片的方法

详解vue文件中使用echarts.js的两种方式

vue+echarts实现动态绘制图表及异步加载数据的方法

微信小程序中使用echarts的实现方法

基于mpvue小程序使用echarts画折线图的方法示例