与echarts的第一次邂逅

Echarts

• echarts的定义
• echarts的核心定义
• echarts常用的图表类型
• 颜色修改
• 特别样式
• 数据的堆叠和label标签
• 多图表和工具箱

echarts的定义

echarts是百度捐给apache基金会的JavaScript的图表的库，比较符合中国人对图表使用的习惯，与echarts一样的还有HeightCharts和D3，echarts的官网为https://echarts.spache.org/zh/index.html

echarts的核心定义

了解完echarts的定义我们再来说一下echarts的核心定义，只要为以下几点：
1、 instance 实例
2、 series 系列
3、 tooltip 提示
4、legend 图例
5、 xAxis x轴
6、 yAxis y轴
7、toolbox 工具箱
8、 dataZoom 缩放
9、 vitualMap 虚拟映射
基本运用的表现为下面的图片：

实例的运用：

echarts常用的图表类型

1、 bar 柱状

{name:"人数",type:"bar",data:[1000,800,500,900,1300]},

2、 pie饼型(radius:[“60%”(我是注释：第一个百分比是控制pie的大小)，“40%（我是注释：第二个百分比是控制同心圆的大小）”])

{name:"年龄分布",type:"pie",radius:["20%","5%"],left:"-50%",top:"-60%",
data:[
	{name:"14-20岁",value:35},
	{name:"20-25岁",value:45},
	{name:"25-35岁",value:15},
	{name:"35-50岁",value:5},
	]},

3、 line线性 (areaStyle 面)，（smooth:true）

{name:"人气",type:"line",smooth:true,
// areaStyle:{color:"#f70"},
data:[1300,500,900,100,1800]},

颜色修改

主题：自定义主题
light为浅色，dark为深色

var echart = echarts.init(document.getElementById("container"),"dark");

自定义主题：
要想使用自定义主题首先要去官网中的资源主题构建工具

在这里修改你需要的样式，修改完成后点击下载主题保存一个本地js，然后引入到自己的项目中

在这里输入你js的名称即可。

color：调色盘

// 调色盘
color:["#5000ab","#f70","#f07"],

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:{
	width:12,
	cap:"round",
	opacity:0.7,
}

面的样式：

areaStylr:{
	color:linear2,
}

数据的堆叠和label标签

数据的堆叠：

stack:true

label标签：

show:true 是否提示
formatter:"{a}{b}{c}" 格式化
a 代表数据名
b 代表系列名
c 代表数字
position 位置
insideRight内部右侧

多图表和工具箱

1、 grid 网格布局
top/left/right/bottom
height width
2、 xAxis yAxis 轴线指定
gridlndex：0
gridlndex：1
3、 series 数据指定轴线
xAxisindex:0
yAxisindex:0

工具箱：

 var option={
		 title:{text:"工具箱"},
		  toolbox: {
		     show: true,
		     // 缩放
		     feature: {
		       dataZoom: {
		         yAxisIndex: 'none'
		       },
		       // 数据视图
		       dataView: { readOnly: false },
		       // 魔法类型
		       magicType: { type: ['line', 'bar'] },
		       // 重置
		       restore: {},
		       // 保持图片
		       saveAsImage: {}
		     }
		   },