【ECharts】常见问题

v-if、v-show布局问题

在Vue中使用Echarts时，可以通过v-if来控制Echarts的显示和隐藏。在模板中添加一个容器div，并绑定一个v-if属性。当v-if的值为true时，显示Echarts；当v-if的值为false时，隐藏Echarts。

当使用v-if(v-show)控制显隐时，会出现布局问题（例如：100%识别成100px）

解决方案：使用nextTick 渲染，重新resize图表

this.$nextTick(() => {
	  if (this.lineChart) {
	    this.lineChart.resize();
	  }
});

<template>
  <div>
    <a-radio-group v-model="chartType" @change="changeType">
      <a-radio-button value="line">折线图</a-radio-button>
      <a-radio-button value="bar">柱状图</a-radio-button>
    </a-radio-group>
    <div ref="line_chart" style="width: 100%; height: 500px" v-show="chartType == 'line'"></div>
    <div ref="bar_chart" style="width: 100%; height: 500px" v-show="chartType == 'bar'"></div>
    <br />
  </div>
</template>
<script>
import * as echarts from 'echarts';
export default {
  data() {
    return {
      chartType: 'line',

      lineChart: null,
      barChart: null,
    };
  },
  mounted() {
    this.lineChart = echarts.init(this.$refs.line_chart);
    this.barChart = echarts.init(this.$refs.bar_chart);

    this.initLineChart();
    this.initBarChart();
  },
  methods: {
    changeType() {
      if (this.chartType == 'line') {
        this.initLineChart();
        this.$nextTick(() => {
          if (this.lineChart) {
            this.lineChart.resize();
          }
        });
      }
      if (this.chartType == 'bar') {
        this.initBarChart();

        this.$nextTick(() => {
          if (this.barChart) {
            this.barChart.resize();
            s;
          }
        });
      }
    },

    initLineChart() {
      let yList = [400, 500, 600, 800, 1200, 1500, 1300, 900, 700, 600, 500];
      let xList = ['n-5', 'n-4', 'n-3', 'n-2', 'n-1', 'n', 'n+1', 'n+2', 'n+3', 'n+4', 'n+5'];
      let option = {
        title: {
          text: '折线图1',
        },
        tooltip: { show: true },
        xAxis: {
          type: 'category',
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
          },
          data: xList,
        },
        yAxis: {
          type: 'value',
          //网格线
          splitLine: {
            lineStyle: {
              type: 'dashed', //设置网格线类型 dotted：虚线 solid:实线
            },
          },
        },
        series: [
          {
            type: 'line',
            smooth: true,
            symbolSize: 6,
            symbol: 'circle',
            data: yList,
            color: '#FFC310',
            //区域填充样式
            areaStyle: {
              //线性渐变，前4个参数分别是x0,y0,x2,y2(范围0~1);相当于图形包围盒中的百分比。如果最后一个参数是‘true’，则该四个值是绝对像素位置。
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                  offset: 0,
                  color: 'rgba(246,198,56, 0.6)',
                },
                {
                  offset: 1,
                  color: 'rgba(246,198,56, 0)',
                },
              ]),
            },
            markLine: {
              silent: true,
              symbol: ['none', 'none'],
              lineStyle: {
                type: 'dashed',
                dashOffset: 1,
                width: 1,
                opacity: 0.6,
              },
              data: [
                {
                  name: 'x轴标记线',
                  xAxis: 'n',
                  label: {
                    formatter: '{b}：{c}',
                  },
                  lineStyle: {
                    color: '#0050FF',
                  },
                },
                {
                  name: 'y轴标记线',
                  yAxis: 800,
                  label: {
                    formatter: '{b}：{c}',
                    position: 'insideEndTop',
                  },
                  lineStyle: {
                    color: '#00C078',
                  },
                },
              ],
            },
          },
        ],
      };

      this.lineChart.setOption(option);
    },
    initBarChart() {
      var xList = ['组A', '组B', '组C', '组D', '组E', '组F'];
      var yList = [8.0, 23.2, 25.6, 76.7, 135.6, 162.2];
      var option = {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
            crossStyle: {
              color: '#999',
            },
          },
        },
        xAxis: [
          {
            type: 'category',
            data: xList,
            axisPointer: {
              type: 'shadow',
            },
          },
        ],
        yAxis: [
          {
            type: 'value',
            name: '金额：万元',
            min: 0,
            max: 250,
            interval: 50,
            axisLabel: {
              formatter: '{value} 万元',
            },
          },
        ],
        series: [
          {
            name: '成交额',
            type: 'bar',
            barWidth: 20,
            data: yList,
            color: '#FBD444',
            tooltip: {
              valueFormatter: function(value) {
                return value + ' 万元';
              },
            },
            // 柱体上方显示数值
            label: {
              show: true,
              position: 'top',
            },
          },
        ],
      };
      this.barChart.setOption(option);
    },
  },
};
</script>

数据发生变化图表没变化