大数据可视化技术：Echarts图表详解

TongYuTian
368 阅读3分钟

ECharts教程（二）

Echarts图表标准配置图示技巧

​ Echarts图表开发四大步骤

第一步：引入Echarts

第二步：初始化Echarts

第三步：准备Data

第四步：设置Option

<body>
	<div id="main" style="height:400px;"></div>
	...
	<script src="/echarts-all.js"></script>
	<script>
		var myChart = echarts.init(document.getElementById('main'))
		var data = [xx,xx];
		var option = {
			...
			series:{
				data:data,
				...
			}
		}
		myChart.setOption(option);
	</script>
</body>

一些简单配置模板方便使用:blog.csdn.net/tian1544224…

Echarts十大常见图表

一、柱状图

<!DOCTYPE html>
<head>
	<meta charset="utf-8">
	<title>ECharts</title>
</head>
<body>
	<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
	<div id="main" style="height:400px"></div>
	<!-- ECharts单文件引入 -->
	<script src="http://echarts.baidu.com/build/dist/echarts-all.js"></script>
	<script type="text/javascript">
	// 基于准备好的dom，初始化echarts图表
	var myChart = echarts.init(document.getElementById('main'));
	var option = {
	title : {
		text: '某地区蒸发量和降水量',
		subtext: '纯属虚构'
	},
	tooltip : {
		trigger: 'axis'
	},
	legend: {
		data:['蒸发量','降水量']
	},
	toolbox: {
		show : true,
		feature : {
			mark : {show: true},
			dataView : {show: true, readOnly: false},
			magicType : {show: true, type: ['line', 'bar']},
			restore : {show: true},
            saveAsImage : {show: true}
         }
    },
    calculable : true,
    xAxis : [
    	{
    		type : 'category',
            data : ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11						月','12月']
        }
    ],
    yAxis : [
    	{
            type : 'value'
         }
    ],
    series : [
         {
            name:'蒸发量',
            type:'bar',
            data:[2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 					3.3],
            markPoint : {
            data : [
            	{type : 'max', name: '最大值'},
            	{type : 'min', name: '最小值'}
            ]
         },
         markLine : {
         	data : [
            	{type : 'average', name: '平均值'}
            ]
         }
    },
    {
    	name:'降水量',
        type:'bar',
        data:[2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 				  2.3],
        markPoint : {
        	data : [
            			{name : '年最高', value : 182.2, xAxis: 7, yAxis: 183, 							symbolSize:18},
                		{name : '年最低', value : 2.3, xAxis: 11, yAxis: 3}                    	   ]
         },
         markLine : {
         data : [
         	{type : 'average', name : '平均值'}
            ]
    }
  }
 ]
};
myChart.setOption(option);
</script>
</body>

​ 二、折线图

<!DOCTYPE html>
<head>
	<meta charset="utf-8">
	<title>ECharts</title>
</head>
<body>
	<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
	<div id="main" style="height:400px"></div>
	<!-- ECharts单文件引入 -->
	<script src="http://echarts.baidu.com/build/dist/echarts-all.js"></script>
	<script type="text/javascript">
	// 基于准备好的dom，初始化echarts图表
	var myChart = echarts.init(document.getElementById('main'));
	var option = {
		title: {
		text: '未来一周气温变化',
		subtext: '纯属虚构'
	},
	tooltip: {
		trigger: 'axis'
	},
	legend: {
		data: ['最高气温', '最低气温']
	},
	toolbox: {
		show: true,
		feature: {
			mark: {show: true},
			dataView: {show: true, readOnly: false},
			magicType: {show: true, type: ['line', 'bar']},
			restore: {show: true},
			saveAsImage: {show: true}
		}
	},
	calculable: true,
	xAxis: [
		{
			type: 'category',
			boundaryGap: false,
			data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
		}
	],
	yAxis: [
		{
			type: 'value',
			axisLabel: {
				formatter: '{value}
			}
		}
	],
	series: [
		{
			name: '最高气温',
			type: 'line',
			data: [11, 11, 15, 13, 12, 13, 10],
			markPoint: {
			data: [
				{type: 'max', name: '最大值'},
				{type: 'min', name: '最小值'}
			]
		},  
	markLine: {
		data: [
				{type: 'average', name: '平均值'}
			]
		}
	},
	{
		name: '最低气温',
		type: 'line',
		data: [1, -2, 2, 5, 3, 2, 0],
		markPoint: {
			data: [
				{name: '周最低', value: -2, xAxis: 1, yAxis: -1.5}
			]
		},
		markLine: {
		data: [
			{type: 'average', name: '平均值'}
			]
		}
	}
]
};
myChart.setOption(option);
</script>
</body>

​ 三、饼状图

const self = this
let chart = echarts.init(self.$refs.chart)
let color = ['#E15822', '#FFB061', '#FFDDBB', '#00D3AE', '#7E7E7E']
let option = {
	title: {
		text: '病情分布',
		x: 'center',
		y: 'center',
		textStyle: {
		color: '#465166',
		fontSize: 14,
		fontWeight: '400',
		fontFamily: 'PingFangSC-Regular,PingFang SC'
	}
},
tooltip: {
	show: true,
},
series: [{
	name: '病情分布',
	type: 'pie',
	radius: [30, 55],
	center: ['50%', '50%'],
	roseType: 'radius',
	color: color,
	label: {
	normal: {
		formatter: function (params) {
			return params.data.name + ' ' + params.data.value + ' ' + '例'
		}
	},
},
data: [{
	name: '危症',
	value: 23
},
{
	name: '重症',
	value: 41
},
{
	name: '平稳',
	value: 63
},
{
	name: '治愈',
	value: 12
},
{ 
	name: '死亡', 
	value: 2   
}]  
}]    
}     
chart.setOption(option, true)

​ 四、地图（map）

​ 五、散点图（scatter）

​ 六、气泡图（bubble）

​ 七、雷达图（radar）

​ 八、漏斗图（funnel）

​ 九、词云（wordCloud）

​ 十、仪表盘 (gauge)

avatar
文章
阅读
粉丝