1.ECharts
ECharts is an open source visualization library based on JavaScript, which can help users create various types of charts, such as line charts, pie charts, scatter charts and histograms, etc. ECharts provides a very convenient API that can help you easily customize your charts, and can be configured with data in JSON format.
2. Dynamic Stacked Column Chart
Dynamic stacked column charts are a very popular data visualization method that can help users better understand trends and patterns in large amounts of data. In this type of chart, each category is represented as a color code, and then, on the x-axis, you see the cumulative value for each category. In some cases, these values may exceed the maximum value of the Y axis, so, in this case, they will be stacked on top of other values.
Data visualization and interactivity is an important advantage of dynamic stacked column charts, which can help users better understand large amounts of complex data. This type of chart can also support interactivity through dragging and zooming, enabling users to better explore and understand data.
3. Realize
The following is the application in the vue component:
<template>
<div class="myEchartsContent"></div>
</template>
<script>
import * as echarts from 'echarts';
export default {
data(){
return{
databar:[]
}
},
props:{
cableda:{
type:Array
}
},
watch:{
cableda:{
immediate: true,
handler (val) {
this.databar[0]=val[0]
this.initChart()
},
deep: true
}
},
name: 'Echarts',
mounted() {
this.initChart();
},
methods: {
initChart() {
let myChart = echarts.init(document.querySelector('.myEchartsContent'));
const rightColor = {
color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
{
offset: 1,
color: '#FF4A4A'
},
{
offset: 0.5,
color: '#fbc21b'
},
{
offset: 0,
color: '#41FF80'
}
])
}
const leftColor = {
color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
{
offset: 0,
color: '#FF4A4A'
},
{
offset: 0.5,
color: '#fbc21b'
},
{
offset: 1,
color: '#41FF80'
}
])
}
this.cableda.map(v => {
databar.push({
value: v,
itemStyle: v > 0 ? rightColor : leftColor
})
})
let option = {
backgroundColor: 'rgba(255, 255, 255,0)',
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'none' // 隐藏鼠标移入的辅助提示线
}
},
grid: {
left: '30%' // 将左侧距离设置为图表宽度的 30%
},
xAxis: [{
type: 'category',
data: ['2020/02/01'],
color: '#59588D',
// x轴坐标刻度线
axisTick: {
show: false
},
axisLabel: {
show:false,
color: '#4d4d4d', // x轴文字颜色
fontSize: 12,
margin: 10, // x轴刻度文字与x轴的距离
formatter: (value, index) => {
return index === 0 ? value : value.slice('5')
}
},
axisLine: {
lineStyle: {
color: '#fad0c4' // x轴线颜色
}
}
}],
yAxis: [{
type: 'value',
scale: 'fixed',
axisTick: {
show: false
},
axisLine: {
show: false // 隐藏y轴线
},
axisLabel: {
// show:false,
offset:5,
color: '#4d4d4d'
},
splitLine: {
show:false,
lineStyle: {
color: '#fad0c4' // 背景横线颜色
}
},
// 计算左侧y轴对应的柱状图数据的最大值
max: 5,
min: -5
},
],
series: [{
symbolOffset: [5, 0],
type: 'bar',
data: this.databar,
barWidth: '30%',
barMaxWidth: 20,
itemStyle:this.databar[0] > 0 ? rightColor : leftColor
},
{
// 分隔
type: 'pictorialBar',
itemStyle: {
normal: {
color: '#ccc'
}
},
symbolRepeat: 'fixed',
symbolMargin: 2,
symbol: 'rect',
symbolClip: true,
symbolSize: [18, 2],
symbolPosition: 'start',
symbolOffset: [0, -1],
// symbolBoundingData: this.total,
// data: [20, 80, 100, 40, 34, 90, 60],
data: this.databar,
width: "100%",
z: 0,
zlevel: 1
}
]
};
myChart.setOption(option);
}
}
};
</script>
<style scoped>
.myEchartsContent{
width: 150px;
height: 300px;
}
</style>4. Running effect
