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

最新推荐文章于 2025-02-06 17:20:00 发布

lty-

最新推荐文章于 2025-02-06 17:20:00 发布

阅读量1k

点赞数 1

分类专栏： Java开发前端文章标签： vue js node.js vue.js

本文链接：https://blog.youkuaiyun.com/m0_47298981/article/details/107630752

版权

Java开发前端专栏收录该内容

6 篇文章

订阅专栏

vue框架应用echarts

首先下载echarts

 cnpm  i echarts -S

在项目中引入echarts

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

给一个容器，用来放echarts

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

获取id，初始化

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

接下来是柱状图的部分，

 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]
                 }
              
             ]
         };