| <template> |
| <div :class="className" :id="id" :style="{height:height,width:width}"/> |
| </template> |
| |
| <script> |
| import echarts from 'echarts' |
| import resize from './mixins/resize' |
| |
| export default { |
| mixins: [resize], |
| props: { |
| className: { |
| type: String, |
| default: 'chart' |
| }, |
| id: { |
| type: String, |
| default: 'chart' |
| }, |
| width: { |
| type: String, |
| default: '200px' |
| }, |
| height: { |
| type: String, |
| default: '200px' |
| } |
| }, |
| data() { |
| return { |
| chart: null |
| } |
| }, |
| mounted() { |
| this.initChart() |
| }, |
| beforeDestroy() { |
| if (!this.chart) { |
| return |
| } |
| this.chart.dispose() |
| this.chart = null |
| }, |
| methods: { |
| initChart() { |
| this.chart = echarts.init(document.getElementById(this.id)) |
| |
| const xAxisData = [] |
| const data = [] |
| const data2 = [] |
| for (let i = 0; i < 50; i++) { |
| xAxisData.push(i) |
| data.push((Math.sin(i / 5) * (i / 5 - 10) + i / 6) * 5) |
| data2.push((Math.sin(i / 5) * (i / 5 + 10) + i / 6) * 3) |
| } |
| this.chart.setOption( |
| { |
| backgroundColor: '#08263a', |
| grid: { |
| left: '5%', |
| right: '5%' |
| }, |
| xAxis: [{ |
| show: false, |
| data: xAxisData |
| }, { |
| show: false, |
| data: xAxisData |
| }], |
| visualMap: { |
| show: false, |
| min: 0, |
| max: 50, |
| dimension: 0, |
| inRange: { |
| color: ['#4a657a', '#308e92', '#b1cfa5', '#f5d69f', '#f5898b', '#ef5055'] |
| } |
| }, |
| yAxis: { |
| axisLine: { |
| show: false |
| }, |
| axisLabel: { |
| textStyle: { |
| color: '#4a657a' |
| } |
| }, |
| splitLine: { |
| show: true, |
| lineStyle: { |
| color: '#08263f' |
| } |
| }, |
| axisTick: { |
| show: false |
| } |
| }, |
| series: [{ |
| name: 'back', |
| type: 'bar', |
| data: data2, |
| z: 1, |
| itemStyle: { |
| normal: { |
| opacity: 0.4, |
| barBorderRadius: 5, |
| shadowBlur: 3, |
| shadowColor: '#111' |
| } |
| } |
| }, { |
| name: 'Simulate Shadow', |
| type: 'line', |
| data, |
| z: 2, |
| showSymbol: false, |
| animationDelay: 0, |
| animationEasing: 'linear', |
| animationDuration: 1200, |
| lineStyle: { |
| normal: { |
| color: 'transparent' |
| } |
| }, |
| areaStyle: { |
| normal: { |
| color: '#08263a', |
| shadowBlur: 50, |
| shadowColor: '#000' |
| } |
| } |
| }, { |
| name: 'front', |
| type: 'bar', |
| data, |
| xAxisIndex: 1, |
| z: 3, |
| itemStyle: { |
| normal: { |
| barBorderRadius: 5 |
| } |
| } |
| }], |
| animationEasing: 'elasticOut', |
| animationEasingUpdate: 'elasticOut', |
| animationDelay(idx) { |
| return idx * 20 |
| }, |
| animationDelayUpdate(idx) { |
| return idx * 20 |
| } |
| }) |
| } |
| } |
| } |
| </script> |