用vue实现echarts条形图官方实例

Posted 2022-12-01 Afololer

<style scoped>
  #chart_example
    width: 50%;
    height: 500px;
  
</style>
<template>
  <div  >
    <h2>vue中插入Echarts示例</h2>
    <div id="chart_example">

    </div>
  </div>
</template>
<script>
  import * as echarts from 'echarts'
  //import world from '../node_modules/echarts/map/js/world.js'
  // import '../../node_modules/echarts/map/js/china.js' // 引入中国地图数据

  export default 
    data() 
      return 
    ,
    mounted() 
      let myChart = echarts.init(document.getElementById('chart_example'));
      let option = 
        title: 
          text: 'World Population'
        ,
        tooltip: 
          trigger: 'axis',
          axisPointer: 
            type: 'shadow'
          
        ,
        legend: ,
        grid: 
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        ,
        xAxis: 
          type: 'value',
          boundaryGap: [0, 0.01]
        ,
        yAxis: 
          type: 'category',
          data: ['Brazil', 'Indonesia', 'USA', 'India', 'China', 'World']
        ,
        series: [
          
            name: '2011',
            type: 'bar',
            data: [18203, 23489, 29034, 104970, 131744, 630230]
          ,
          
            name: '2012',
            type: 'bar',
            data: [19325, 23438, 31000, 121594, 134141, 681807]
          
        ]
      ;
      myChart.setOption(option)
      window.addEventListener('resize',function() myChart.resize());
    ,
    methods: ,
    watch: ,
    created() 

    

  
</script>

官方实例很难用，有时候行，有时候不行，不知道为什么