H5 Echarts視覺化圖表的使用

風華振茂發表於2018-05-08
H5Echarts視覺化

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。

相關文章