|
|
<template>
|
|
|
<div :class="className" :style="{height:height,width:width}" />
|
|
|
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
import * as echarts from 'echarts'
|
|
|
require('echarts/theme/macarons') // echarts theme
|
|
|
import resize from './mixins/resize'
|
|
|
|
|
|
const animationDuration = 6000
|
|
|
|
|
|
export default {
|
|
|
mixins: [resize],
|
|
|
props: {
|
|
|
className: {
|
|
|
type: String,
|
|
|
default: 'chart'
|
|
|
},
|
|
|
width: {
|
|
|
type: String,
|
|
|
default: '100%'
|
|
|
},
|
|
|
height: {
|
|
|
type: String,
|
|
|
default: '500px'
|
|
|
},
|
|
|
chartData: {
|
|
|
type: Object
|
|
|
}
|
|
|
},
|
|
|
data() {
|
|
|
return {
|
|
|
chart: null
|
|
|
}
|
|
|
},
|
|
|
mounted() {
|
|
|
this.$nextTick(() => {
|
|
|
this.initChart()
|
|
|
})
|
|
|
},
|
|
|
watch: {
|
|
|
chartData: {
|
|
|
deep: true,
|
|
|
handler(val) {
|
|
|
this.setOptions(val)
|
|
|
}
|
|
|
}
|
|
|
},
|
|
|
beforeDestroy() {
|
|
|
if (!this.chart) {
|
|
|
return
|
|
|
}
|
|
|
this.chart.dispose()
|
|
|
this.chart = null
|
|
|
},
|
|
|
methods: {
|
|
|
initChart() {
|
|
|
this.chart = echarts.init(this.$el, 'macarons');
|
|
|
this.$nextTick(() => {
|
|
|
this.setOptions(this.chartData);
|
|
|
})
|
|
|
},
|
|
|
setOptions(chartdata) {
|
|
|
console.log(chartdata.xArr)
|
|
|
this.chart.setOption({
|
|
|
dataZoom: [
|
|
|
//给x轴设置滚动条
|
|
|
{
|
|
|
startValue: 0,
|
|
|
endValue: 6, // 显示条数
|
|
|
type: 'slider',
|
|
|
show: true,
|
|
|
xAxisIndex: [0],
|
|
|
handleSize: 0, //滑动条的 左右2个滑动条的大小
|
|
|
height: 8, //组件高度
|
|
|
left: 50, //左边的距离
|
|
|
right: 40, //右边的距离
|
|
|
bottom: 31, //右边的距离
|
|
|
handleColor: '#EFEFEF', //h滑动图标的颜色
|
|
|
handleStyle: {
|
|
|
borderColor: '#409EFF',
|
|
|
borderWidth: '1',
|
|
|
shadowBlur: 2,
|
|
|
background: '#EFEFEF',
|
|
|
shadowColor: '#EFEFEF'
|
|
|
},
|
|
|
fillerColor: new echarts.graphic.LinearGradient(1, 0, 0, 0, [{
|
|
|
//给颜色设置渐变色 前面4个参数，给第一个设置1，第四个设置0 ，就是水平渐变
|
|
|
//给第一个设置0，第四个设置1，就是垂直渐变
|
|
|
offset: 0,
|
|
|
color: '#409EFF'
|
|
|
},
|
|
|
{
|
|
|
offset: 1,
|
|
|
color: '#409EFF'
|
|
|
}
|
|
|
]),
|
|
|
backgroundColor: '#EFEFEF', //两边未选中的滑动条区域的颜色
|
|
|
showDataShadow: false, //是否显示数据阴影 默认auto
|
|
|
showDetail: false, //即拖拽时候是否显示详细数值信息 默认true
|
|
|
handleIcon: 'M-292,322.2c-3.2,0-6.4-0.6-9.3-1.9c-2.9-1.2-5.4-2.9-7.6-5.1s-3.9-4.8-5.1-7.6c-1.3-3-1.9-6.1-1.9-9.3c0-3.2,0.6-6.4,1.9-9.3c1.2-2.9,2.9-5.4,5.1-7.6s4.8-3.9,7.6-5.1c3-1.3,6.1-1.9,9.3-1.9c3.2,0,6.4,0.6,9.3,1.9c2.9,1.2,5.4,2.9,7.6,5.1s3.9,4.8,5.1,7.6c1.3,3,1.9,6.1,1.9,9.3c0,3.2-0.6,6.4-1.9,9.3c-1.2,2.9-2.9,5.4-5.1,7.6s-4.8,3.9-7.6,5.1C-285.6,321.5-288.8,322.2-292,322.2z',
|
|
|
filterMode: 'filter'
|
|
|
}
|
|
|
//下面这个属性是里面拖到
|
|
|
// {
|
|
|
// type: 'inside',
|
|
|
// show: true,
|
|
|
// xAxisIndex: [0],
|
|
|
// start: 0, //默认为1
|
|
|
// end: 50,
|
|
|
// },
|
|
|
],
|
|
|
grid: {
|
|
|
top: 10,
|
|
|
left: '2%',
|
|
|
right: '2%',
|
|
|
bottom: '3%',
|
|
|
containLabel: true
|
|
|
},
|
|
|
xAxis: [{
|
|
|
type: 'category',
|
|
|
data: chartdata.xArr,
|
|
|
axisTick: {
|
|
|
alignWithLabel: true
|
|
|
}
|
|
|
}],
|
|
|
yAxis: [{
|
|
|
type: 'value',
|
|
|
minInterval: 1,
|
|
|
axisTick: {
|
|
|
show: false
|
|
|
}
|
|
|
}],
|
|
|
series: [{
|
|
|
name: '数据',
|
|
|
type: 'bar',
|
|
|
stack: 'vistors',
|
|
|
barWidth: '60%',
|
|
|
data: chartdata.yArr,
|
|
|
animationDuration,
|
|
|
barMaxWidth: 20, // 每一个都要设置
|
|
|
}]
|
|
|
})
|
|
|
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
</script>
|
