echarts 可视化数据展示竖柱状图

左手的ㄟ右手 2023-06-22 05:22 207阅读 0赞

**效果**

**![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl8zODQwNDg5OQ_size_16_color_FFFFFF_t_70][]**

initChart6() {
            // 竖直柱状图
            var option = {
              grid:{
                  x:20,
                  y:20,
                  x2:20,
                  y2:50,
                  containLabel:true
              },
              tooltip: {
                  trigger: 'axis',
                  axisPointer: {
                      type: 'shadow'
                  }
              },
              xAxis: {
                splitLine: {show: false},
                data: ['助洁','助餐','助医','助浴','助行','助聊'],
                axisLabel: {
                  show: true,
                    textStyle: {
                      color: '#fff',  //更改坐标轴文字颜色
                      fontSize : 12      //更改坐标轴文字大小
                    }
                },
                axisTick: {
                    show: false
                },
                axisLine:{
                    lineStyle:{
                        color:'#5e97b5' //更改坐标轴颜色
                    }
              }
            },
            yAxis: {
                splitLine:{    //分割线
                show:true,
                lineStyle:{
                  color:'#5e97b5',
                  width: 1,
                  opacity:.5,
                  }
                },
                axisLabel: {
                  show: true,
                    textStyle: {
                      color: '#5e97b5',  //更改坐标轴文字颜色
                      fontSize : 12      //更改坐标轴文字大小
                    }
                },
                axisTick: {
                    show: false
                },
                axisLine:{
                    lineStyle:{
                        color:'#5e97b5' //更改坐标轴颜色
                    }
              }
            },
              series: [{
                  name: 'bar',
                  type: 'bar',
                  barWidth: 15,
                  top: 0,
                  bottom: 50,
                  itemStyle: {
                      normal: {
                          barBorderRadius: 15,
                          color: new echarts.graphic.LinearGradient(
                              0, 0, 0, 1,
                              [
                                  {offset: 0, color: '#4cfdf7'},
                                  {offset: 1, color: '#2a72eb'}
                              ]
                          )
                      }
                  },
                  data: [650,700,800,900,1000,1200]
              }]
          };
          // 基于准备好的dom，初始化echarts实例
          var myChart = echarts.init(
            document.getElementById("main6"),
            "walden"
          );
          // 使用刚指定的配置项和数据显示图表。
          myChart.setOption(option);
        },

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl8zODQwNDg5OQ_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20191214113114622.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl8zODQwNDg5OQ==,size_16,color_FFFFFF,t_70