点击右上方红色按钮关注“web秀”，让你真正秀起来

前言

前面有文章，讲述了Vue中封装Echarts组件，但都是直接上代码，没有具体对代码进行讲述。今天我们就来看看，如何使Echarts图表更美观，都是那部分属性使其更惊艳的。

如何使你的Echarts图表更具有观赏性和实用性？

如何隐藏坐标轴

Echarts中options对象有xAxis、yAxis参数，可以控制是否显示坐标轴、坐标轴刻度标签、坐标轴轴线、坐标轴刻度、分割线等yAxis: { // y轴

type: 'value',

show: false, // 是否显示坐标轴

data: [],

axisLabel: { show: false }, // 坐标轴刻度标签

axisLine: { show: false }, // 坐标轴轴线

axisTick: { show: false }, // 坐标轴刻度

splitLine: { show:false } // 分割线

}

如何使你的Echarts图表更具有观赏性和实用性？

柱形图如何设置柱子渐变和圆角

主要通过itemStyle属性，color来设置渐变，barBorderRadius属性设置圆角，遵循css左上、右上、右下、左下顺序。同时下方代码加了柱子数值label配置。barWidth是柱子宽度。series : [{

type: 'bar',

barWidth: 40, // 柱子宽度

label: {

show: true,

position: 'top', // 位置

color: '#1CD8A8',

fontSize: 14,

fontWeight: 'bold', // 加粗

distance: 20 // 距离

}, // 柱子上方的数值

itemStyle: {

barBorderRadius: [20, 20, 0, 0],// 圆角(左上、右上、右下、左下)

color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [

'#2FAEF2',

'#1CD8A8'

].map((color, offset) => ({color, offset}))), // 渐变

},

data: [10, 52, 200, 334, 390, 330, 220]

}]

如何使你的Echarts图表更具有观赏性和实用性？

柱形图柱子阴影

从上方series可以看出，接收的数组类型的。所以我们在加一个，同样的type，不过数据，我们在每个值上+100，做成阴影即可。var data = [10, 52, 200, 334, 390, 330, 220];

...

series : [{ // 阴影柱形

type: 'bar',

barWidth: 40,

itemStyle: {

color: 'rgba(167,167,167,0.2)',

barBorderRadius: [20, 20, 0, 0]

},

barGap:'-100%',

data: data.map(item=>{

return item+=100

}),

},

...

柱形图添加折线

同上方一样，我们还可以再在series里面添加line，同时可以设置折线颜色(lineStyle)，折线线条区域颜色(areaStyle)等，都是可以通过new echarts.graphic.LinearGradient()来设置渐变。series: [

...

...

{

type:'line',

smooth: true, // 线条转折有弧度

symbol: 'circle', // 数值点类型('circle', 'rectangle', 'triangle', 'diamond', 'emptyCircle', 'emptyRectangle', 'emptyTriangle', 'emptyDiamond')

showSymbol: true,

symbolSize: 8, // 数值点的大小

itemStyle: {

color: ['#1CD8A8']

},// 数值点的颜色

lineStyle: {

width: 2,

color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [{offset: 0, color: '#2FAEF2'},{offset: 1, color: '#1CD8A8'}])

}, // 线条渐变

areaStyle: {

color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [

{offset: 0, color: 'rgba(47,174,242,0)'},

{offset: 0.5, color: 'rgba(34,202,192,0.04)'},

{offset: 1, color: 'rgba(28,216,168,0.52)'}]

)

}, // 线条区域渐变

data: data, // 折线图的渲染数据

}]

如何使你的Echarts图表更具有观赏性和实用性？

数据格式

这个也是非常简单，只需要在需要格式化的地方，加上formatter方法，即可对数据进行格式化。series: [

...

...

{

type: 'bar',

barWidth: 12,

label: {

show: true,

position: 'top',

formatter: (params) => {

return params.value + '万';

},

color: '#1CD8A8',

fontSize: 14,

fontWeight: 'bold',

distance: 25

},

...

},

如何使你的Echarts图表更具有观赏性和实用性？

多数据图表可缩放

在options下可以添加dataZoom，来控制默认展示位置等。...

dataZoom: [{

show: true, // 是否显示滚动图，依然可以滚动缩放

realtime: true,

start: 0, // 默认起始位置

end: 55 // 默认终点位置

}, {

type: 'inside',

realtime: true,

start: 45,

end: 85

}],

如何使你的Echarts图表更具有观赏性和实用性？

图例legend详细参数

可以定义图例的位置，布局颜色等。...

legend: {

right: 68, //图例组件离右边的距离

orient : 'vertical', //布局 纵向布局

width: 40, //图行例组件的宽度,默认自适应

x : 'left', //图例显示在右边

itemWidth:10, //图例标记的图形宽度

itemHeight:10, //图例标记的图形高度

data:['直接访问','邮件营销','联盟广告','视频广告','web秀'],

textStyle:{ //图例文字的样式

color:'#333',

fontSize:12

}

}

如何使你的Echarts图表更具有观赏性和实用性？

视图里面加阴影提示：tooltip，提示框组件

show，默认true，是否显示提示框组件

trigger，触发类型，item、axis、none，当为none的时候代表什么都不触发，就不会显示提示框

axisPointer，坐标轴指示器配置项，实际上坐标轴指示器的全部功能，都可以通过轴上的 axisPointer 配置项完成。

axisPointer的type类型：

1、'line' 直线指示器

2、'shadow' 阴影指示器

3、'none' 无指示器

4、'cross' 十字准星指示器。其实是种简写，表示启用两个正交的轴的 axisPointer。

label属性加formatter函数，可以格式化提示框显示内容...

tooltip: {

trigger: 'axis',

axisPointer: {

type: 'shadow',

label:{

formatter: function (params) {

return '星期：' + params.value;

}

}

}

}

如何使你的Echarts图表更具有观赏性和实用性？

总结

总的来讲，颜色搭配是具有观赏性的主要因素。同时，精简不需要的组件和功能，能够一目了然看懂的图表，不要添加无用的元素说明信息。这样反而让用户看不懂，不知道图表要表达什么主题了。

公告

为了感谢大家一直以来的支持，小编发起了抽奖活动，大家可以去参与，转发抽奖活动和关注小编即可参与，抽出5名小伙伴每人20元话费奖励。再次感谢大家的支持。