前言
项目中有时候会遇到稍微复杂一些的echars图，需要我们自定义样式，比如3d图，这里我们可以用pictorialBar 象形图实现
效果图
实现
- 创建一个div
<div ref="bar-3d" class="bar-3d" style="width:100%;height:100%"></div>
- 实例化echarts对象
import * as echarts from "echarts/lib/echarts"
let bar = echarts.init(this.$refs['bar-3d'])
- 基本配置项
let options = {
// 直角坐标系内绘图网格,设置组件距离容器的距离
grid: {
left: 50,
top: 50,
right: 50,
bottom: 50
},
// 设置鼠标移入的提示，默认显示
tooltip: {},
// 设置图例
legend:{
textStyle:{
color: '#999'
}
},
// 设置x轴
xAxis: {
data: [],
// 显示x轴
axisLine: {
show: true
},
// 设置x轴的颜色和偏移量
axisLabel:{
color: '#999',
rotate: 0
},
// 不显示x轴刻度
axisTick:{
show: false
}
},
// 设置y轴
yAxis: {
// 显示y轴
axisLine: {
show: true
},
// 设置y轴的颜色
axisLabel:{
color: '#999',
},
// 不显示y轴刻度
axisTick:{
show: false
},
// 不显示分隔线
splitLine:{
show: false
}
},
// 表示不同系列的列表
series:[]
}
-
series配置项目——这是重点定义一个函数 通过传参的形式设置
series和x轴数据对
series一些参数进行说明
| 参数 | 说明 |
|---|---|
| z | 表示层级，值越高，层级越高 |
| type | 表示类型，bar： 柱状图； pictorialBar：象形图，表示可以设置图形的形状 |
| symbol | 表示图形的形状'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow', 'none' |
| symbolOffset | 表示图形的偏移量 |
| symbolPosition | 表示图形定位的位置， 'start'：图形边缘与柱子开始的地方内切。'end'：图形边缘与柱子结束的地方内切。 'center'：图形在柱子里居中。 |
| symbolSize | 表示图形的宽高 |
| barGap | 表示柱子之间的重合度，用百分比表示 |
| stack | 当命名一样时，数据可以堆叠 |
initDta (xData, yData) {
// 设置顶部和底部的值
let symbolData = [], newShadowHight = []
let heights = 0
yData.forEach(item => {
symbolData.push(1)
heights+=item
})
newShadowHight = yData.map(item => heights)
options.xAxis.data = xData
options.series = [
// 底部
{
z: 2,
type: 'pictorialBar',
symbol: 'diamond',
symbolOffset: ['0%', '50%'],
symbolSize: [30, 12],
toolltip:{
show: false
},
itemStyle:{
color: new echarts.graphic.LinearGradient(0,0,0,1, [{offset:0, color: '#1f7eff'},{offset:1, color: '#64adff'}])
}
data: symbolData, // [1,1,1,1,1]
}
// 内容区域
{
z: 1,
type: 'bar',
barWidth: 30,
data: yData
}
// 内容的顶部
{
z: 3,
type: 'pictorialBar',
symbol: 'diamond',
symbolPosition: 'end'
symbolOffset: ['0%', '-50%'],
symbolSize: [30, 12],
toolltip:{
show: false
},
itemStyle:{
color: new echarts.graphic.LinearGradient(0,0,0,1, [{offset:0, color: '#1f7eff'},{offset:1, color: '#64adff'}])
}
data: yData,
}
// 阴影区域
{
z: 0,
type: 'bar',
barWidth: 30,
data: newShadowHight, // [400, 400, 400, 400, 400]
itemStyle:{
color: new echarts.graphic.LinearGradient(0,0,0,1, [{offset:0, color: '#9cc1ff'},{offset:1, color: '#ecf5ff'}])
}
}
// 阴影的顶部
{
z: 3,
type: 'pictorialBar',
symbol: 'diamond',
symbolPosition: 'end'
symbolOffset: ['0%', '-50%'],
symbolSize: [30, 12],
toolltip:{
show: false
},
itemStyle:{
color: new echarts.graphic.LinearGradient(0,0,0,1, [{offset:0, color: '#1f7eff'},{offset:1, color: '#64adff'}])
}
data: newShadowHight,
}
]
// 设置配置项
bar.setOption(options)
}
- 应用
// 当请求回数据后
this.initData(['周一','周二','周三','周四','周五','周六'],[100, 50, 70, 80, 60, 40])
