Echarts 基础知识浅析

1. 引入Echarts

Echarts是基于canvas的数据可视化产品，由百度公司推出

参考官方文档，引入教程示例即可，注意有两种引入方式：

（1）直接引入

（2）模块化引入

2. 基本API使用

（1）设置整个图表的大小位置使用grid属性

grid: {    设置图标整体的大小

// x: '20%',   x,y表示左上角的相对位置，

// y: 100,

// x2: 200,   x2,y2表示右下角的相对位

// y2: 100,

width: '50%',   宽度设置

left: '30%',   left设置

// containLabel: true

},

（2）坐标轴xAxis、yAxis

xAxis: {

show: true,     设置显示隐藏坐标轴

type: 'category',   设置坐标轴类型，共category，value，time三种类型

boundaryGap: true,      设置是否在图形开始处于y轴留有间距

// position:'top',     设置x轴的位置在顶端

axisLine: {

onZero: false,      设置x轴不以y轴的0点开始

lineStyle: {        设置 x轴的样式

color: 'red',

width: 2,

type: 'solid'

}

},

axisTick: {

show: true,     设置x轴上标点显示

length: 10,     设置x轴上标点显示长度

lineStyle: {     设置x轴上标点显示样式

color: 'red',

width: 2,

type: 'solid'

}

},

axisLabel: {     设置标点内容显示样式

show: true,

rotate: 45,    设置标点内容45度倾斜显示

margin: 30,

textStyle: {

color: 'blue',

fontFamily: '微软雅黑'

},

formatter: function(val) { 设置显示data中的内容，可以传函数val是data中元素

return val + '函数'

}

},

splitLine: {    设置x轴标点分割线样式

show: true,

lineStyle: {

color: 'skyblue',

type: 'dashed',

width: 1

}

},

splitArea: {   设置x轴标点分割区域样式

show: true,

},

name: '星期',

data: ['周一', '周二', {    可以将数据设置成对象，单独设置样式

value: '周三',

textStyle: {

color: 'red',

fontSize: 30,

fontWeight: 'bold'

}

}, '周四', '周五', '周六', '周日']

},

yAxis: {

type: 'value',

max: 20,    设置y轴的最大值

axisLabel: {

formatter: '{value} °C'

}

},

（3）数据显示series

① 折线显示

series: [{

name: '最低气温',

type: 'line',    设置数据显示为折线

symbol: 'image://https://www.baidu.com/img/bd_logo1.png',

设置折线上标记点的样式，可以引用图片，也可以写star

symbolSize: 30,     设置标记大小

showAllSymbol: true,   设置显示所有标记

smooth: true,     设置折线图平滑显示

legendHoverLink: false,   关闭选择不同折线图时的高亮效果

data: [1, -2, 2, 5, {    单独设置某个数据的样式

value: 3,

symbolSize: 50

}, 2, 0],

itemStyle: {    设置折线图的样式

normal: {   设置默认样式

color: 'black',

lineStyle: {

width: 3,

color: 'green'

},

areaStyle: {  设置折线图与坐标进行填充

color: 'yellow'

},

label: {

show: true,

position: 'bottom',   设置折线上标记数据在下方显示

textStyle: {

color: 'red'

}

}

},

emphasis: {     设置鼠标移动到数据上时的，强调显示效果

label: {

show: true,

position: 'top',

textStyle: {

color: 'gray'

}

}

}

}

}]

② 柱形图显示

dataZoom: {     开启数据图缩放功能

show: true

},

series: [{

name: '蒸发量',

type: 'bar',

barGap: '-50%',  设置相同标记位柱形图之间的相对位置

barCategoryGap: '20%',   设置不同标记位柱形图之间的位置

barWidth: 10,   设置柱形图的宽度

data: [2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3],

markPoint: {

data: [{

type: 'max',

name: '最大值'

}, {

type: 'min',

name: '最小值'

}]

},

markLine: {

data: [{

type: 'average',

name: '平均值'

}]

}

},

（4）title标题

title: {

text: '某地区蒸\n发量和降水量',   \n表示换行

subtext: '纯属虚构',   副标题

x: 100,    x,y表示标题的位置设置，可以为left等

y: 200

},

（5）legend图例

legend: {

data: [{   可单独设置数据的样式，加入””空字符串可实现换行

name: '蒸发量',

icon:'image://https://www.baidu.com/img/bd_logo1.png',  替换图标

textStyle: {

color: 'green',

fontWeight:'bold'

}

}, '降水量'],

borderColor: 'red',

formatter:'{name}Echarts',   设置模板显示，也可以写函数

itemWidth: 20,    设置图例样式的宽

itemHeight: 20,    设置图例样式的高

selected:{'降水量':false},

textStyle:{color:'blue'}   设置图例文字的颜色

},

（6）数据拖拽显示条dataZoom

dataZoom: {

show: true,

realtime: false,   关闭实时变化功能

start: 40,    设置开始和结束的范围

end: 60,

zoomLock: true   开启锁定范围的功能

},

（7）数据显示提示框tooltip（可自定义formatter，多级显示）

tooltip: {

// trigger: 'axis',

trigger: 'item',   只当鼠标经过数据时显示

showContent: false,  关闭数据详细信息框

showDelay: 0,    关闭显示延迟

transitionDuration: 0,  关闭动画延迟效果

hideDelay:1000,   设置鼠标离开后延迟消失效果

axisPointer: {    设置背景提示样式，有cross、line、shadow三种

type: 'shadow',

lineStyle: {    设置line样式的具体内容

color: 'red'

},

crossStyle: {

color: 'green'

},

shadowStyle: {

color: 'rgba(150, 150, 150, 0.3)'

}

}

},

（8）饼图

{

name: '访问来源',

type: 'pie',

radius: ['40%', '55%'],   设置两个值，可变为环形图

// startAngle: 0,      设置起始角度

clockWise: false,    设置逆时针转动

data: [{

value: 335,

name: '直达'

}, {

value: 310,

name: '邮件营销'

}, {

value: 234,

name: '联盟广告'

}, {

value: 135,

name: '视频广告'

}, {

value: 1048,

name: '百度',

textStyle: {

align: 'left'

}

}, {

value: 251,

name: '谷歌'

}, {

value: 147,

name: '必应'

}, {

value: 102,

name: '其他'

}]

}