Question

我想使用相同的数据多次复制同一张图表，就像这里https://jsfiddle.net/BlackLabel/qndeho5u/一样。这个概念很好用，但是当将其传输到Vue时，由于未复制参数，出现了一些问题。例如，图表未采用Polar。

为了避免一直写图表选项，我将其另存为变量。在jsfiddle上它可以工作，但是在我的Vue代码上却不能。我在这里想念什么？

    <template>
  <v-container fluid text-xs-center style="height: 90vh; max-height: 100%;">
     <v-layout row wrap>


      <v-flex xs6>
          <v-card flat>
              <Chart :options="chart1"/>
          </v-card>
          </v-flex>
                <v-flex xs6>
          <v-card flat>
              <Chart :options="chart2"/>
          </v-card>
        </v-flex>
      </v-layout>
  </v-container>
</template>
<script>

import Chart from '../components/Chart.vue'
import Highcharts from 'highcharts'



var testdata2 = {name:'a', value: [
          // each slice of the pie gets its own color
          { y: 10, color: '#1DACE8', name: 'a' },
          { y: 30, color: '#1C366B', name: 'b' },
          { y: 45, color: '#F24D29', name: 'c' },
          { y: 93, color: '#E5C4A1', name: 'd' },
          { y: 15, color: '#C4CFD0', name: 'e' }
        ]}

var testdata3 = {name:'b', value:[
          // each slice of the pie gets its own color
          { y: 30, color: '#1DACE8', name: '1a' },
          { y: 20, color: '#1C366B', name: '2b' },
          { y: 35, color: '#F24D29', name: '3c' },
          { y: 23, color: '#E5C4A1', name: '4d' },
          { y: 95, color: '#C4CFD0', name: '5e' }
        ]}


var options = {
  chart: {
    polar: true,
    backgroundColor: '#F5F5F5'
  },
  credits: {
    enabled: false
  },
  exporting: {
    buttons: {
      contextButton: {
        theme: {
          fill: "#F5F5F5"
        }
      }
    }
  },
  title: {
    text: 'City 1'
  },
  subtitle: {
    text: 'Railacc stuff'
  },
  pane: {
    startAngle: -22.5
  },
  xAxis: {
    tickInterval: 45,
    min: 0,
    max: 360,
    labels: false
  },
  plotOptions: {
    series: {
      pointStart: 0,
      pointInterval: 45
    },
    column: {
      pointPadding: 0,
      groupPadding: 0,
      colorByPoint: true
    }
  },
  tooltip: {
    formatter: function() {
      return this.y, this.point.name;
    }
  }
}


export default {
  name: 'chartapp2',
  components: {
  Chart,
  },
  data() {
    return {
  chart1:{
    options,
    legend: {
    enabled: false
  },
  series: [{
    type: 'column',
    data: testdata2.value,
    pointPlacement: 'between'
  }]
      },

    chart2:{
    options,
    legend: {
    enabled: false
  },
  series: [{
    type: 'column',
    data: testdata3.value,
    pointPlacement: 'between'
  }]
      }, 
      }
    },
  }
</script>

Answer 1

我已经在Vue框架中为您复制了这张图表。看看它，让我知道您是否不清楚。

演示：

https://codesandbox.io/s/vue-template-9xb0c?fontsize=14

Highcharts-vue选项作为变量

1 个答案: