echarts图表应用

1，echarts简介

Javascript的图表库
百度捐给apache基金会
比较符合中国人习惯
HeightCharts , D3为同行
2，几个常用的图表类型type：

type:"bar"柱状图

type:"line"折线图

type:"pie"饼图
3，实际案例

页面效果

还可以在同一个容器或创建的实例中放入多个图表,

页面效果

改一下图表的颜色
变成粉色

同样我们也可以修改鼠标经过时的高亮

{
					type: "bar",
					data: [90, {value:60,itemStyle:{color:"#ffd7d7"}}, 30, 87, 99],
					name: "成绩",
					itemStyle:{
						normal:{color:"#795eff"},
						emphasis:{color:"#f55"}
					}

效果如图

再接下来做一个特殊渐变效果的柱状图
先做一个渐变效果

var mycolor2 = {
				type: 'linear',
				x: 0,
				y: 0,
				x2: 0,
				y2: 1,
				colorStops: [{
					offset: 0,
					color: 'rgba(0, 85, 255, 0.7)' // 0% 处的颜色
				}, {
					offset: .7,
					color: 'rgba(29, 249, 231, 0)' // 100% 处的颜色
				}],
				global: false // 缺省为 false
			}

做圆角

{
						name: "柱状",
						type: "bar",
						data: [120, 200, 240, 180, 80],
						itemStyle: {
							borderRadius: [100, 100, 100, 100],
							color: mycolor1
						}
					}

效果图如下

最后再做一个堆叠图

页面内效果

同时 echarts还支持自定义主题：https://echarts.apache.org/zh/theme-builder.html

可自己定制喜欢的主题，然后下载导入就可以了