123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139 |
- <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: {
- //观察option的变化
- 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: {
- trigger: 'axis',
- },
- grid:{
- left:'20%',
- },
- // legend: {
- // textStyle:{
- // color:'#FFF',
- // },
- // data: ['蒸发量', '平均温度'],
- // },
- xAxis: [
- {
- type: 'category',
- data: that.data.xAxisData,
- axisPointer: {
- type: 'shadow'
- },
- axisLabel:{
- color:'#333',
- },
- axisLine:{
- lineStyle:{
- color:'#EDEDED',
- },
- },
- }
- ],
- yAxis: [
- {
- type: 'value',
- name: '',
- // interval: 50,
- // nameTextStyle:{
- // color:'#333',
- // },
- axisLabel: {
- // formatter: '{value} ml',
- // color:'#FFF'
- },
- axisLine:{
- show:false,
- },
- axisTick:{
- show:false,
- },
- },
- ],
- series: [
- {
- name: that.data.barData.name,
- type: 'bar',
- itemStyle:{
- color:'#1DCAF5'
- },
- data: that.data.barData.data
- },
- {
- name: that.data.lineData.name,
- type: 'line',
- itemStyle:{
- color:'#5AAFF9',
- borderColor:'#CFAF19'
- },
- data: that.data.lineData.data
- }
- ]
- };
- this.chart.setOption(option);
- }
- }
- };
- </script>
|