echarts柱状图相关代码如下:
productDataStats(eleId, chartType, caseData, keyArr) {
echarts.init(document.getElementById(eleId)).dispose()
var myChart = echarts.init(document.getElementById(eleId))
var datasetArr = []
var tempData = {
dimensions: ['chartCategory', 'chartCount', 'chartKey'],
source: caseData
}
datasetArr.push(tempData)
for (var i = 0; i < keyArr.length; i++) {
var transf = {
transform: {
type: 'filter',
config: { dimension: 'chartKey', value: keyArr[i] }
}
}
datasetArr.push(transf)
}
var seriesArr = []
for (var j = 0; j < keyArr.length; j++) {
var index = j + 1
var series = {
name: keyArr[j],
type: chartType,
stack: 'x',
label: {
show: false,
position: 'inside'
},
encode: {
// 将 "chartCategory" 列映射到 X 轴。
x: 'chartCategory',
// 将 "chartCount" 列映射到 Y 轴。
y: 'chartCount',
label: ['chartCount']
},
datasetIndex: index
}
seriesArr.push(series)
}
var option = {
legend: {},
tooltip: {},
grid: {
left: '3%',
right: '4%',
bottom: '12%',
containLabel: true
},
dataZoom: [
{
show: true, //控制滚动条显示隐藏
type: 'slider',
xAxisIndex: [0],
realtime: true, //拖动滚动条时是否动态的更新图表数据
height: 5, //滚动条高度
start: 0, //滚动条开始位置(共100等份)
end: caseData.length > 25 ? 50 : this.endValue, //滚动条结束位置
bottom: 10,
zoomLock: true //控制面板是否进行缩放
}
],
dataset: datasetArr,
xAxis: {
type: 'category',
show: true,
axisLabel: {
interval: 0, // 坐标轴刻度标签的显示间隔
rotate: 40,
formatter: function (value, index) {
if (value.length > 7) {
return value.substr(0, 7) + '...'
} else {
return value
}
}
}
},
yAxis: { name: '案件量(件)' },
// Declare several bar series, each will be mapped
// to a column of dataset.source by default.
series: seriesArr
}
myChart.setOption(option)
},
实现的效果如下:
首页滚动效果:
vue 安装 vue-count-to
npm install vue-count-to
所用页面引入包
import CountTo from 'vue-count-to'
使用方式及参数说明:
引用代码:
<CountTo
:startVal='startVal'
:endVal='endVal'
:duration='duration'
/>
参数说明:
效果如下:
tip:当autoplay:true时,它将在startVal或endVal更改时自动启动