echarts使用笔记分享

定义

了解echarts

1.javascript的图标库；
2.百度捐给了apache基金会
3.比较符合中国人习惯
4.HeightCharts，D3是其同行
5.echarts官网

核心概览

• instance实例
• series系列
• tooltip提示
• legend图例
• xAxis x轴
• yAxis y轴
• toolbox 工具箱
• dataZoom 缩放
• vitualMap虚拟映射

示例

<div id="container" style="width: 600px;height: 400px;"></div>
		<script>
		//初始化echart实例
			var echart =echarts.init(document.getElementById("container"));
			//定义选项
			var option ={
				//标题
				title:{text:"前端大讲堂数据"},
				//鼠标提示
				tooltip:{},
				//图例
				legend:{data:["人数","人气"]},
				//x轴线
				xAxis"人数",type:"bar",data:[1000,800,500,900,1300]},
					//areaStyle:{color:"#f70"}  面积和区域
					{name:"人气",type:"line",smooth:true,areaStyle:{color:"#f70"},data:[200,600,500,150,900]},
				]
			};
			//设置参数
			echart.setOption(option)
		</script>

图表常用类型

bar 柱状
pie饼型 ------radius:[“60%”,“40%”],
line 线性 —1.areaStyle 面 2. smooth:true 平滑线

颜色的修改

a. 主题:自定义主题  light 浅色   dark深色
b. 自定义主题   https://echarts.apache.org/zh/theme-builder.html
c. color:调色盘
d. 系列调色盘
e. 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:10,cap:"round",opacity:0.7},

面的样式

areaStyle:{color:mycolor},//与在上边定义过的颜色

数据的堆叠

stack:true;

label标签

show:true   //是否显示
formatter:"{a}{b}{c}"  //格式化   a--数据名   b--系列名  c--数字
position      //位置     insideRight 内部右侧
color   //颜色

示例

<div id="container" style="width:600px;height:400px"></div>
		<script>
		//初始化echart实例
			var echart =echarts.init(document.getElementById("container"),"dark");
			//定义选项
			var option = {
				
				//标题
				title:{text:"堆叠图"},
				//鼠标提示
				tooltip:{
					trigger:"axis"
				},
				//图例
				legend:{data:["前端","UI","Python"]},
				//x轴线
				xAxis:{data:["2019","2020","2021"]},
				yAxis:{},
				series:[
					{name:"前端",type:"bar",data:[100,50,180],stack:true,label:{show:true,position:"insideTop",formatter:"专业:{a}  年份:{b}  人数:{c}"}},
					{name:"UI",type:"bar",data:[200,100,80],stack:true,label:{show:true,position:"insideTop",formatter:"专业:{a}  年份:{b}  人数:{c}"}},
					{name:"Python",type:"bar",data:[180,150,100],stack:true,label:{show:true,position:"insideTop",formatter:"专业:{a}  年份:{b}  人数:{c}"}},
				]
			};
			//设置参数
			echart.setOption(option)
		</script>