123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270 |
- <template>
- <div :class="className" :id="id" :style="{height:height,width:width}"></div>
- </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: {
- borderWidth: 0,
- top: 110,
- 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>
|