Echarts初学经验
2019-07-07 本文已影响0人
浮萍逐浪
每次接触新知识的时候，总会有那么死去活来的两天。不管多难的东西，只要自己不放弃自己，前途一片光明。
以下介绍Echarts一些基本的配置项
一、标题组件title
- 主表题样式设置textStyle
1、color：主表题文字颜色
2、fontStyle：主标题文字字体的风格可选'normal''italic''oblique'
3、fontWeight：主标题文字字体的粗细
文字样式方面，上述属性，基本通用
title: {
text: '主表题 ',
subtext: ' 副标题',
left: '控制标题距离左边距离',
top: '控制标题右边距离',
textStyle: {//主表题样式设置
textAlign: 'center',
color: '#505D6F',
fontSize: 15,
},
subtextStyle: {//副标题样式设置
textAlign: 'center',
fontSize: 15,
},
},
二、图例组件legend
- 图例的数据数组data
1、name：图例项的名称，应等于series中的某个name值
2、icon：ECharts 提供的标记类型包括 'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow', 'none'
3、textStyle：图例项的文本样式。
legend: {
orient: 'horizontal',//图例水平数值排列
itemGap: 25,//图例每项之间的间隔
top: 0,//top，left，等控制图例们的位置
textStyle: {//图例文字样式
color: '#666666',
fontSize: 15,
},
data: [
{
name:'一',
icon:'circle',//图例样式
},
{
name:'二',
icon:'circle',
},
{
name:'三',
icon:'circle',
},
{
name:'四',
icon:'',
}
],
},
三、图表网格绘制grid（控制位置的）
grid: {
left: '3%',
right: '4%',
bottom: '0%',
top: '15%',
containLabel: true, //区域是否包含刻度图标
},
四、直角坐标系grid中的x轴xAxis
-
坐标轴线相关设置axisLine
1、show：是否显示
2、lineStyle：相关线条样式设置 -
坐标刻度标签相关设置axisLabel
-
坐标轴刻度相关设置axisTick
1、show：是否显示
2、lineStyle：相关线条样式设置 -
类目数据data
1、单个类目名称value
2、类目标签的文字样式textStyle
xAxis: [
{
type: 'category',
axisLine: {
show: true,//坐标轴线是否显示
lineStyle: {//坐标轴线样式
color: '#888888',
width: 2,
},
},
axisLabel: {//坐标刻度标签设置
show: true,
color: '#888888',
},
axisTick: {//坐标轴刻度设置
show: true,
alignWithLabel: true, //刻度对齐方式
lineStyle: {
color: '#888888',
width: 2,
},
},
data: [
'1日',
'3日',
'5日',
'7日',
'9日',
'11日',
'13日',
'15日',
'17日',
'19日',
'21日',
'23日',
'25日',
'27日',
'29日',
],
},
],
五、直角坐标系grid中的x轴yAxis
- 直角坐标系 grid 中的 y 轴，一般情况下单个 grid 组件最多只能放左右两个 y 轴，多于两个 y 轴需要通过配置 offset 属性防止同个位置多个 Y 轴的重叠。
yAxis: [
{
type: 'value',
name: '左侧坐标轴',
axisLine: {
show: true,
lineStyle: {
color: '#888888',
width: 1,
},
},
axisLabel: {
show: true,
color: '#888888',
},
axisTick: {
show: true,
lineStyle: {
color: '#888888',
width: 2,
},
},
splitLine: {//横向分割线
lineStyle: {
type: 'solid',
color: '#888888',
},
},
},
{
type: 'value',
name: '右侧坐标轴',
min: 0,
max: 100,
interval: 20,
axisLine: {
show: true,
lineStyle: {
color: '#888888',
width: 1,
},
},
axisLabel: {
show: true,
color: '#888888',
},
axisTick: {
show: true,
lineStyle: {
color: '#888888',
width: 2,
},
},
splitLine: {
lineStyle: {
type: 'solid',
color: '#ccc',
},
}, //设置横向分割线颜色
},
],
六、系列列表series
- type：可选line（折线图），pie（饼图），bar（柱状图）等等
- name：legend中的name与此处相同时显示图例
- stack：数据堆叠，同个类目轴上系列配置相同的stack值可以堆叠放置
- itemStyle：设置图形样式
series: [
{
name: '一',
type: 'bar',
stack: '广告',
data: [40, 70, 100, 100, 130, 150, 170, 202, 240, 250, 206, 208, 200, 170],
itemStyle: {
color: '#00f',
},
barWidth: 22,
},
{
name: '二',
type: 'bar',
stack: '广告',
data: [40, 50, 60, 80, 100, 130, 140, 150, 160, 160, 170, 190, 100, 150, 160],
itemStyle: {
normal: {
color: '#0f0',
},
},
barWidth: 22,
},
{
name: '三',
type: 'bar',
stack: '广告',
data: [40, 50, 60, 80, 100, 100, 80, 70, 50, 30, 30, 60, 90, 80, 60],
itemStyle: {
normal: {
barBorderRadius: [40, 40, 0, 0],
color: '#f00',
},
},
barWidth: 22,
},
{
name: '四',
type: 'line',
color: '#9E86FF',
yAxisIndex: 0,
data: [150, 119, 213, 314, 215, 318, 425, 228, 133, 434, 335, 340, 150, 170, 180],
itemStyle: {
normal: {
lineStyle: {
width: 4,
shadowColor: '#9E86FF',
shadowBlur: 10,
shadowOffsetY: 0,
},
},
},
smooth: true,
symbol: '',
},
],
本文主要介绍了Echarts的基本用法以及大概模板，想要熟练掌握还需要多多练习，想搞更多花样还要自己阅读官方的配置项手册更多花样将在其它文章中介绍。
