echarts的初步了解和初步使用

echarts

定义

1. javascript的图表的库
2. 百度捐给apache基金会
3. 比较符合中国人习惯
4. HeiCharts.D3为同行
   官网：https://echarts.apache.org/zh/index.html

核心概览

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

图标常用类型

1. bar 柱状
2. pie饼形
   radius：[“60%”,“40%”]
3. line线形
   areaStyle 面
   smooth:true 平滑

颜色的修改

1. 主题：自定义主题
   light，dark 浅色和深色
2. 自定义主题
   https://echarts.apache.org/zh/theme-builder.html
3. color:调色盘
4. color系列调色盘
5. itemStyle
   默认 normal
   强调状态 emphasis

特别样式

1. 渐变

  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
}

2. 线的样式（lineStyle）

lineStyle:{
	width:12,
	cap:"round",
	opacity:0.7,
},

3.面的样式

areaStyle:{
	color:linear2,
}

数据的堆叠

stack:true

创建一个简单的柱状图

现在来创建一个简单的柱状图

<script>
	// 初始化echart实例
	var echart = echarts.init(document.getElementById("container"))
	//定义选项
	var option = {
		//标题
		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,900,1300]},
			// areaStyle:{color:"#55ffff"},面积区域
			{name:"人气",type:"line",smooth:true,data:[200,600,300,770,900]},
			{name:"年龄分布",type:"pie",
			radius:["20%","10%"],left:"-50%",top:"-50%",
			data:[
				{name:"少年",value:20},
				{name:"青年",value:50},
				{name:"中年",value:30},
				{name:"老年",value:8},
			
			]}
		]
	}
	//设置参数
	echart.setOption(option)
	
</script>

接下来看看效果图