用echarts做一个可以换行展示的柱状图

vue框架应用echarts

1. 首先下载echarts

 cnpm  i echarts -S

2. 在项目中引入echarts

import ECharts from 'echarts'
Vue.prototype.$echarts=ECharts;

3. 给一个容器，用来放echarts

<el-card class="main-left" id="map" style="width:500px;heigtht:500px" >
   
  </el-card>
// 注意：一定要设置容器的宽和高，不然图形是不会展示的！

4. 获取id，初始化

var myChart = this.$echarts.init(document.getElementById('map'));

5. 接下来是柱状图的部分，

 var  option = {
             legend: {},
             tooltip: {},
             xAxis: [
                 {type: 'category', gridIndex: 0,data:[1,2,3,4,5,6,6,7,8,9,10,
                 1,2,3,4,5,6,6,7,8,9,10,
                 1,2,3,4,5,6,6,7,8,9,10,
                 ]},
                 {type: 'category', gridIndex: 1,data:[1,2,3,4,5,6,6,7,8,9,10,
                 1,2,3,4,5,6,6,7,8,9,10,
                 1,2,3,4,5,6,6,7,8,9,10,]},
                 
             ],
             yAxis: [
                 {gridIndex: 0},
                 {gridIndex: 1},
                 // {gridIndex:2}
             ],
             grid: [
                 {bottom: '55%'},
                 {top: '55%'}
             ],
             series: [
                 {
                 type: 'bar', 
                 xAxisIndex: 0, 
                 yAxisIndex: 0,
                 barWidth:'20',
                 color:'#789',
                 data: [10, 12, 17,12,3,45,68,98,46,45,12,36,45,12,36,112,35,
                 10, 12, 17,12,3,45,68,98,46,45,12,36,45,12,36,112,35
                 ]
                 },
                 {
                 type: 'bar', 
                 xAxisIndex: 1, 
                 yAxisIndex: 1,
                 barWidth:'20',
                 color:'#789',
                 data: [10, 12, 17,12,3,45,68,98,46,45,12,36,45,12,36,112,35,
                 10, 12, 17,12,3,45,68,98,46,45,12,36,45,12,36,112,35]
                 }
              
             ]
         };

6. 第六步骤

myChart.setOption(option);

7. 最后一步，需要在mounted{}中调用option所在的方法中

this.fengji();

最后的运行结果