- Five minutes to get started
with the code on eCharts :
<div class="information_Line">
<div class="header">
<span>{
{title}}</span>
</div>
<p>{
{ title_ }}</p>
<div class="huEcharts" ref="huEcharts">
<div :id="id" :style="{width: width+'px', height: height+'px'}"></div>
</div>
</div>
data () {
return {
width: 600,
height: 280,
myChart: null,
id: 1 + Math.round(Math.random() * 1000)
}
},
props: {
list: {
type: Array,
default: () => {
return []
}
},// 展现的数据
title: { type: String, default: '标题' }, // 一级标题
title_: { type: String, default: "" }, // 二级标题
},
watch: {
list (val) {
if (val.length === 0) return
this.setData(val)
}
},
methods: {
setData (val) {
if (!this.myChart) return
let xData = []
let yData = []
val.forEach((item) => {
xData.push(item.xValue)
yData.push(item.yValue)
})
this.myChart.setOption({
xAxis: { data: xData },
series: [{ data: yData }]
})
},
init () {
// 绘制图表
this.myChart.setOption({
// 图表位置
grid: {
left: 20,
right: 20,
bottom: 5,
top: 18,
containLabel: true
},
title: { show: false },
tooltip: {
trigger: 'item'
},
dataZoom: {
show: true,
type: 'inside'
},
xAxis: {
type: 'category',
boundaryGap: false,
data: [],
// 坐标线（隐藏）
axisLine: {
lineStyle: {
color: '#4E4D5C'
}
},
// 坐标描述
axisLabel: {
color: '#A29EB3',
fontSize: 13,
width: '100%'
},
// 坐标刻度
axisTick: {
lineStyle: {
opacity: 0
}
}
},
yAxis: {
offset: 16,
type: 'value',
// 设置y轴的样式
axisLine: { show: false },
axisTick: {
show: false
},
axisLabel: {
textStyle: {
color: '#A29EB3',
fontSize: 13
}
},
splitLine: {
lineStyle: {
type: 'solid',
color: ['#4E4D5C']
}
}
},
series: [
{
type: 'bar', // type可以切换别的值，比如line(折线图) 相当于把改变图标类型
barWidth : 30,//柱图宽度
areaStyle: {
color: 'rgba(77, 124, 254, 0.25)'
},
data: [],
// 拐折点样式
itemStyle: {
color: '#4E9ED5',
},
// 线条样式
lineStyle: {
color: '#2D78D5',
width: 1
},
label: {
normal: {
show: true,
position: 'top',
color: '#A29EB3'
}
},
emphasis: {
label: {
position: 'top',
color: '#fff'
}
},
tooltip: {
textStyle: {
color: '#A29EB3'
},
formatter: '{b0}: {c0}'
}
}
]
})
}
},
mounted () {
if (this.$refs.huEcharts) {
this.width = this.$refs.huEcharts.clientWidth
this.height = this.$refs.huEcharts.clientHeight
this.$nextTick(() => {
// 基于准备好的dom，初始化echarts实例
this.myChart = this.$echarts.init(document.getElementById(this.id))
this.init()
this.setData(this.list)
})
}
}
div style
.information_Line {
width: 100%;
height: 100%;
background: #2e2c3d;
border-radius: 4px;
border: 1px solid #1f1c2c;
padding: 20px 20px 30px 20px;
.header {
width: 100%;
height: 32px;
display: flex;
align-content: center;
align-items: center;
justify-content: space-between;
span {
font-size: 18px;
color: #f7f6fd;
}
button {
width: 88px;
height: 32px;
border-radius: 2px;
border: 1px solid #4d7cfe;
font-size: 15px;
color: #4d7cfe;
background: none;
cursor: pointer;
}
}
.huEcharts {
width: 100%;
height: calc(100% - 32px);
background: #2e2c3d;
box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.1);
border-radius: 5px;
margin-top: 10px;
}
}
How to call on the page
- Introduce components
- Apply the component to the page
<BarCharts
title="① YTD Rev (GMV)"
title_="YTD付费企业客户在平台贡献的Rev"
:list="lineList"
/>
Note: To process the data returned after the interface is adjusted (set the x, y axis data display)
getLineList (state, val) {
let lineList = (val.data.result).map(item => {
return { xValue: moment(item.date).format('MM-DD'), yValue: item.total }
})
state.lineList = lineList
}, // 此处是在vuex里面进行数据处理的，在methods里面思路同上，使用map循环返回一个处理过的新数组
- If there are other functions, such as drop-down boxes and export buttons, events can be dispatched in the component.
Effect display:
