【无标题】

echarts
定义
javascript的图表的库
百度捐给apache基金会
比较符合中国人习惯
HeightCharts，D3为同行
核心概览
instance实例
series系列
tooltip 提示
legend 图例
xAxis x轴
yAxis y轴
toolbox 工具箱
dataZoom 缩放
vitualMap 虚拟映射

图标常用类型
bar 柱状
pie 饼型— radius:[“60%”,40%]
line 线性 --areaStyle 面 smooth:true 平滑

颜色的修改
主题：自定义颜色
light,dark浅色与深色

自定义主题
自定义主题地址

color：调色盘
color系列调色盘
itemStyle normal 默认 emphasis 强调状态

特别样式
渐变
var mycolor = {
type: ‘linear’,
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [{
offset: 0,
color: ‘aqua’ // 0% 处的颜色
}, {
offset: 1,
color: ‘rgba(10, 50, 128, 1)’ // 100% 处的颜色
}],
global: false // 缺省为 false
};
线的样式 lineStyle
lineStyle：{
width：12,
cap:“round”
opacity:0.7,
},

面的样式
areaStyle{
color：linear2,
}

数据的堆叠
stack:true

label标签
show：true 是否显示
格式化
formatter："{
{a}{b}{c}
}"
a 代表数据名
b 系列名
c 数字

位置
position
insideRight 内部右侧
top/left/right/bottom/inside

颜色
color

多图表
网格布局
grid
top/left/right/bottom/
height
width

轴线指定
xAxis yAxis
gridIndex:0,gridIndex:1

数据指定轴线
xAxisIndex:0
yAxisIndex:0

echarts基本用法

//引入自定义主题

	</div>
	<script>
		// 01 修改主题 dark light , 自定义
		// 02 修改调色盘
		// 初始化echart实例
		var echart = echarts.init(document.getElementById("container"));
		// 定义选项
		var option = {
			// 调色盘
			// color:["#5000ab","#f70","#0f7"],
			// 标题
			title: {
				text: "前端大讲堂数据"
			},
			// 鼠标提示
			tooltip: {},
			// 图例
			legend: {
				data: ["人数", "人气", "年龄分布"]
			},
			// x轴线
			xAxis: {
				data: ["12-1", "12-2", "12-3", "12-4", "12-5"]
			},
			// y轴线
			yAxis: {},
			// 系列数据
			series: [
				// 名称，类型（柱状图），数据data
				{
					name: "人数",
					type: "bar",
					data: [1000, 800, 500,{value:900,itemStyle:{color:"pink"}}, 1300]
				},
				// areaStyle:{color:"#f70"} 面积区域
				{
					name: "人气",
					type: "line",
					smooth: true,
					data: [200, 35, 1500, 80, 1400]
				},
				{
					name: "年龄分布",
					type: "pie",
					radius: ["20%", "10%"],
					// color:["#5000ab","#f70","#0f7"],
					data: [{
							name: "少年",
							value: 20
						},
						{
							name: "青年",
							value: 50
						},
						{
							name: "中年",
							value: 30,
							// 条目样式
							itemStyle: {
								// 正常样式
								normal: {
									color: "#f70"
								},
								// 强调样式
								emphasis: {
									color: "#f3ff00"
								},
							},
						},
						{
							name: "老年",
							value: 8
						},
					]
				}
			]
		};
		// 设置参数
		echart.setOption(option)
	</script>
</body>

echarts特殊样式

	</div>
	<script>
		var mycolor = {
			type: 'linear',
			x: 0,
			y: 0,
			x2: 0,
			y2: 1,
			colorStops: [{
				offset: 0,
				color: 'aqua' // 0% 处的颜色
			}, {
				offset: 1,
				color: 'rgba(10, 50, 128, 1)' // 100% 处的颜色
			}],
			global: false // 缺省为 false
		};
		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
		};
		var echart = echarts.init(document.getElementById("container"), "dark");
		var option = {
			title: {
				text: "特殊方式"
			},
			legend: {
				data: "人数"
			},
			tooltip: {},
			xAxis: {
				data: ["12-1", "12-2", "12-3", "12-4", "12-5"]
			},
			yAxis: {},
			series: [{
					name: "人数",
					type: "bar",
					data: [20, 50, 80, 30, 50],
					// 渐变颜色，圆角
					itemStyle: {
						color: mycolor,
						borderRadius: [100, 100, 0, 0]
					}
				},
				{
					name: "人数",
					type: "line",
					smooth: true,
					data: [20, 30, 70, 100, 70],
					lineStyle: {
						width: 10,
						cap: "round"
					},
					areaStyle: {
						corlr: mycolor2
					}
				},
			]
		};

		// 设置参数
		echart.setOption(option)
	</script>
</body>