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

小咪咪 2023-06-22 05:21 50阅读 0赞

**效果**

**![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl8zODQwNDg5OQ_size_16_color_FFFFFF_t_70][]**

initChart2() {
            var option = {
              grid: {          //图表位置
                left: "2%",
                // right: "4%",
                top: "4%",
                // bottom: "20px",
                containLabel: true
              },
              tooltip: {
                  trigger: 'axis',
                  axisPointer: {
                      type: 'shadow'
                  }
              },
              legend: {
                data: ['签约老人（千人）', '服务单数（千单）'],
                x:'left',
                y:'80%',
                icon:"circle",    //按钮样式
                textStyle:{ 
                    fontSize: 14,
                    color: '#ffffff'
                }
              },
              xAxis: {             //xy轴的数据
                  type:'value',
                  show:false,
              },
              yAxis: {
                  type:'category',
                  data: ['转塘','三墩','蒋村','西溪','留下','双浦'],
                  splitLine: {show: false},
                  axisLine: {
                      lineStyle: {
                          color: '#fff',
                      }
                  },
                axisLabel: {
                show: true,
                textStyle: {
                    color: '#fff',
                    fontSize:'14'
                }
                }
              },
              series: [{
                  name: '签约老人（千人）',
                  type: 'bar',
                  barWidth: 10,    //柱状图粗细
                  itemStyle: {
                      normal: {
                          barBorderRadius: 20,
                          color: new echarts.graphic.LinearGradient(
                              0, 0, 1, 0,
                              [
                                  {offset: 0, color: 'rgba(42,114,235,.5)'},   //渐变色
                                  {offset: 1, color: 'rgba(42,114,235,1)'},
                              ]
                          )
                      }
                  },
                  data:[20,30,30,10,30,50]
              },{
                  name: '服务单数（千单）',
                  type: 'bar',
                  barWidth: 10,
                  itemStyle: {
                      normal: {
                          barBorderRadius: 20,
                          color: new echarts.graphic.LinearGradient(
                              0, 0, 1, 0,
                              [
                                  {offset: 0, color: 'rgba(76,253,247,.5)'},
                                  {offset: 1, color: 'rgba(76,253,247,1)'},
                              ]
                          )
                      }
                  },
                  data:[30,40,50,60,70,80]   //数据量
              }]
          };
          // 基于准备好的dom，初始化echarts实例
          var myChart = echarts.init(document.getElementById("main2"));
          // 使用刚指定的配置项和数据显示图表。
          myChart.setOption(option);
        },

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