123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233 |
- <template>
- <div :id="id" :class="className" :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: "100%"
- },
- height: {
- type: String,
- default: "400px"
- },
- data: {
- type: Object,
- default: {}
- },
- },
- data() {
- return {
- chart: null
- };
- },
- watch: {
- data: {
- handler(newVal, oldVal) {
- if (newVal) {
- this.initChart();
- }
- },
- deep: true //对象内部属性的监听,关键。
- }
- },
- mounted() {
- this.$nextTick(() => {
- this.initChart();
- })
- },
- beforeDestroy() {
- if (!this.chart) {
- return;
- }
- this.chart.dispose();
- this.chart = null;
- },
- methods: {
- initChart() {
- let that = this;
- this.chart = echarts.init(document.getElementById(this.id));
- let option = {
- tooltip: {
- show: true,
- trigger: 'axis',
- axisPointer: {
- type: 'shadow'
- }
- },
- legend: {
- left: '17%',
- top: 10,
- data: that.data.legendData
- },
- grid: [{
- left: '17%',
- show: true,
- containLabel: false,
- bottom:'45%',
- top:'20%',
- backgroundColor:'#FCF0D3',
- borderColor:'#F5EEF1',
- }, {
- left: '17%',
- show: true,
- containLabel: false,
- bottom:"10%",
- top:'55%',
- backgroundColor:'#DDF7FE',
- borderColor:'#F5EEF1',
- }, {
- left: '17%',
- height: 0,
- bottom:'10',
- top:'90%',
- }],
- xAxis: [{
- type: 'category',
- // inverse: true,
- axisLine: {
- show: false
- },
- axisTick: {
- show: false
- },
- axisLabel: {
- show: false,
- },
- splitLine: {
- show: false,
- },
- data: that.data.xAxisData
- }, {
- gridIndex: 1,
- type: 'category',
- axisLine: {
- show: false
- },
- axisTick: {
- show: false
- },
- axisLabel: {
- show: false,
- },
- splitLine: {
- show: false,
- },
- data: that.data.xAxisData
- },
- {
- gridIndex: 2,
- show: true,
- axisTick: {
- show: false
- },
- axisLine: {
- show: false
- },
- data: that.data.xAxisData
- }
- ],
- yAxis: [{
- // position: 'right',
- axisLabel: {
- color: '#333333',
- // fontSize: '12'
- },
- axisLine: {
- show: true,
- lineStyle:{
- color:'#F5EEF1',
- },
- },
- splitLine: {
- lineStyle:{
- color:'#F5EEF1',
- },
- },
- type: 'value',
- inverse: false,
- axisTick: {
- show: false
- },
- },
- {
- gridIndex: 1,
- // position: 'left',
- axisLabel: {
- color: '#333333',
- // fontSize: '12'
- },
- axisLine: {
- show: true,
- lineStyle:{
- color:'#F5EEF1',
- },
- },
- splitLine: {
- lineStyle:{
- color:'#F5EEF1',
- },
- },
- type: 'value',
- inverse: true,
- axisTick: {
- show: false
- },
- },
- {
- gridIndex: 2,
- // position: 'center',
- type: 'value',
- // inverse: true,
- axisLabel: {
- show: false,
- },
- axisTick: {
- show: false,
- },
- axisLine: {
- show: false,
- },
- },
- ],
- series: [{
- name: that.data.legendData[0],
- barWidth: '50%',
- type: 'bar',
- itemStyle: {
- color: '#F29700',
- },
- data: that.data.seriesData[0]
- },
- {
- type: 'bar',
- barWidth: '50%',
- xAxisIndex: 1,
- yAxisIndex: 1,
- name: that.data.legendData[1],
- itemStyle: {
- color: '#048EF3',
- },
- data: that.data.seriesData[1]
- }
- ]
- };
- this.chart.setOption(option);
- }
- }
- };
- </script>
|