标签：false show color 展示 柱状图 offset 250 type echarts

<template>
  <div>
    <div class="bodyblock">
      <div class="main">
        <div
          class="plain3"
          ref="plain_ref3"
          :style="{ height: zoomNum * 490 + 'px', zoom: 1 / zoomNum }"
        ></div>
      </div>
    </div>
  </div>
</template>

 data() {
    return {
      zoomNum: window.screen.width / 1920,
    };
  },

 plain3() {
      let plains = this.$echarts.init(this.$refs.plain_ref3);
      plains.setOption({  
       legend: {
          data: ["原合同金额", "变更后合同金额"],
          top: "5%",
          left: "20",
          textStyle: {
            color: "rgba(250,250,250,0.6)",
            fontSize: 16,
          },
        },
        barWidth: 15,
        grid:{
            x:'35%',
            y:'20%',
        },
        xAxis: {
          type: "value",
          splitLine: {
            lineStyle: {
              color: "rgba(255,255,255,0.2)",
            },
          },
          splitLine: {
            show: false,
          },
          axisTick: {
            show: false,
          },

          axisLabel: {
            show: false,
          },
          axisLine: {
            show: false,
          },
        },
        yAxis: {
          type: "category",
          data: [
            "自定义",
            "自定义",
            "自定义",
            "自定义",
          ],
          splitLine: {
            show: false,
          },
          axisTick: {
            show: false,
          },
          axisLine: {
            show: true,
            lineStyle: {
                color: '#25B2DD',
                width:2
            }

          },
          axisLabel: {
              show:true,

            //   formatter:function(value){
            //       var texts = value;
            //       if(texts.length>8){
            //           texts=texts.substr(0,8)+'...';
                      
            //       }
            //       return texts;
                  
            //   },
            //  改变y轴字体颜色和大小
            //formatter: '{value} m³ ', //  给y轴添加单位
            textStyle: {
              color: "rgba(250,250,250,0.6)",
              fontSize: 16,
            },
          },
          rich: {
            value: { fontSize: 16 },
            img: {
              height: 15,
              // backgroundColor:{img:'./images/矩形 30 拷贝 2.png'}
            },
          },
        },

        series: [
          {
            type: "bar",
            name: "原合同金额",
            barWidth: '10px',
            barGap: '50%' ,
            itemStyle: {
              normal: {
                label: {
                  show: true, //开启显示
                  position: "right", //在上方显示
                  textStyle: {
                    //数值样式
                    color: "rgba(250,250,250,0.6)",
                    fontSize: 16,
                    fontWeight: 600,
                  },
                },
                // 用new echarts引入会报错
                // color: new echarts.graphic.LinearGradient(1, 0, 0, 0, [
                //   {
                //     offset: 0,
                //     color: "#FD626C",
                //   },
                //   {
                //     offset: 1,
                //     color: "#FF777B",
                //   },
                // ]),
                  // 柱体颜色渐变
                color: {
                  x: 0,
                  y: 0,
                  x2: 0,
                  y2: 1,
                  type: "linear",
                  global: false,
                  colorStops: [
                    {
                      offset: 0,
                      color: "#FD626C",
                    },
                    {
                      offset: 1,
                      color: "#FF777B",
                    },
                  ],
                },

                borderWidth: 2,
              },
            },
            data: [19, 29, 39, 25, 21],
          },
          {
            type: "bar",
            name: "变更后合同金额",
            barWidth: '10px',
            barGap: '80%' ,
            itemStyle: {
              normal: {
                label: {
                  show: true, //开启显示
                  position: "right", //在上方显示
                  textStyle: {
                    //数值样式
                    color: "rgba(250,250,250,0.6)",
                    fontSize: 14,
                    fontWeight: 400,
                  },
                },
                // 柱体颜色渐变
                color: {
                  x: 0,
                  y: 0,
                  x2: 0,
                  y2: 1,
                  type: "linear",
                  global: false,
                  colorStops: [
                    {
                      offset: 0,
                      color: "#25B2DD",
                    },
                    {
                      offset: 1,
                      color: "#4E9BF2",
                    },
                  ],
                },
                borderWidth: 2,
              },
            },
            data: [12, 23, 35, 20, 17],
          },
        ],
    })
    }, 
     mounted: function () {
    this.plain3();
  },

<style type="text/css">
.main {
  width: 100%;
  height: 100%;
}
.plain3 {
  width: 550px;
}
</style>

标签：false,show,color,展示,柱状图,offset,250,type,echarts
来源： https://blog.csdn.net/weixin_49668076/article/details/120364697

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。