| <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 xData = (function() { |
| const data = [] |
| for (let i = 1; i < 13; i++) { |
| data.push(i + 'month') |
| } |
| return data |
| }()) |
| this.chart.setOption({ |
| backgroundColor: '#344b58', |
| title: { |
| text: 'statistics', |
| x: '20', |
| top: '20', |
| textStyle: { |
| color: '#fff', |
| fontSize: '22' |
| }, |
| subtextStyle: { |
| color: '#90979c', |
| fontSize: '16' |
| } |
| }, |
| tooltip: { |
| trigger: 'axis', |
| axisPointer: { |
| textStyle: { |
| color: '#fff' |
| } |
| } |
| }, |
| grid: { |
| left: '5%', |
| right: '5%', |
| borderWidth: 0, |
| top: 150, |
| bottom: 95, |
| textStyle: { |
| color: '#fff' |
| } |
| }, |
| legend: { |
| x: '5%', |
| top: '10%', |
| textStyle: { |
| color: '#90979c' |
| }, |
| data: ['female', 'male', 'average'] |
| }, |
| calculable: true, |
| xAxis: [{ |
| type: 'category', |
| axisLine: { |
| lineStyle: { |
| color: '#90979c' |
| } |
| }, |
| splitLine: { |
| show: false |
| }, |
| axisTick: { |
| show: false |
| }, |
| splitArea: { |
| show: false |
| }, |
| axisLabel: { |
| interval: 0 |
| |
| }, |
| data: xData |
| }], |
| yAxis: [{ |
| type: 'value', |
| splitLine: { |
| show: false |
| }, |
| axisLine: { |
| lineStyle: { |
| color: '#90979c' |
| } |
| }, |
| axisTick: { |
| show: false |
| }, |
| axisLabel: { |
| interval: 0 |
| }, |
| splitArea: { |
| show: false |
| } |
| }], |
| dataZoom: [{ |
| show: true, |
| height: 30, |
| xAxisIndex: [ |
| 0 |
| ], |
| bottom: 30, |
| start: 10, |
| end: 80, |
| handleIcon: 'path://M306.1,413c0,2.2-1.8,4-4,4h-59.8c-2.2,0-4-1.8-4-4V200.8c0-2.2,1.8-4,4-4h59.8c2.2,0,4,1.8,4,4V413z', |
| handleSize: '110%', |
| handleStyle: { |
| color: '#d3dee5' |
| |
| }, |
| textStyle: { |
| color: '#fff' }, |
| borderColor: '#90979c' |
| |
| }, { |
| type: 'inside', |
| show: true, |
| height: 15, |
| start: 1, |
| end: 35 |
| }], |
| series: [{ |
| name: 'female', |
| type: 'bar', |
| stack: 'total', |
| barMaxWidth: 35, |
| barGap: '10%', |
| itemStyle: { |
| normal: { |
| color: 'rgba(255,144,128,1)', |
| label: { |
| show: true, |
| textStyle: { |
| color: '#fff' |
| }, |
| position: 'insideTop', |
| formatter(p) { |
| return p.value > 0 ? p.value : '' |
| } |
| } |
| } |
| }, |
| data: [ |
| 709, |
| 1917, |
| 2455, |
| 2610, |
| 1719, |
| 1433, |
| 1544, |
| 3285, |
| 5208, |
| 3372, |
| 2484, |
| 4078 |
| ] |
| }, |
| |
| { |
| name: 'male', |
| type: 'bar', |
| stack: 'total', |
| itemStyle: { |
| normal: { |
| color: 'rgba(0,191,183,1)', |
| barBorderRadius: 0, |
| label: { |
| show: true, |
| position: 'top', |
| formatter(p) { |
| return p.value > 0 ? p.value : '' |
| } |
| } |
| } |
| }, |
| data: [ |
| 327, |
| 1776, |
| 507, |
| 1200, |
| 800, |
| 482, |
| 204, |
| 1390, |
| 1001, |
| 951, |
| 381, |
| 220 |
| ] |
| }, { |
| name: 'average', |
| type: 'line', |
| stack: 'total', |
| symbolSize: 10, |
| symbol: 'circle', |
| itemStyle: { |
| normal: { |
| color: 'rgba(252,230,48,1)', |
| barBorderRadius: 0, |
| label: { |
| show: true, |
| position: 'top', |
| formatter(p) { |
| return p.value > 0 ? p.value : '' |
| } |
| } |
| } |
| }, |
| data: [ |
| 1036, |
| 3693, |
| 2962, |
| 3810, |
| 2519, |
| 1915, |
| 1748, |
| 4675, |
| 6209, |
| 4323, |
| 2865, |
| 4298 |
| ] |
| } |
| ] |
| }) |
| } |
| } |
| } |
| </script> |