echarts 颜色渐变异形柱状图

echarts yekong 538℃

数据可视化大屏 开发中,需要显示各种各样效果的柱状图,今天整理的是 颜色渐变异形柱状图

echarts 柱状图颜色渐变
显示单位,
显示虚线网格
限制字符长度换行
使用pictorialBar实现异形柱状图

echarts 颜色渐变异形柱状图

echarts版本

"echarts": "^5.5.0",

使用组件

<template>
  <div class="itemBodys">
    <echarts1 :list="list"></echarts1>
  </div>
</template>

<script>
import echarts1 from './components/echarts.vue'
export default {
  name: "title",
  data() {
    return {
      list: [
        {
          title: '工具书',
          value: 30,
          id: 'awardGradeSpecial'
        },
        {
          title: '专业书',
          value: 20,
          id: 'awardGradeFirst'
        }, {
          title: '中文图书',
          value: 10,
          id: 'awardGradeSecond'
        }, {
          title: '日文图书',
          value: 50,
          id: 'awardGradeThird'
        }, {
          title: '中文期刊',
          value: 20,
          id: 'awardGradeNone'
        }, {
          title: '港台原版图书',
          value: 50,
          id: 'awardGradeNone'
        },
      ],
    }
  },
  components: {echarts1},
  watch: {},
  mounted() {
    var that = this;
  },
  methods: {
  },
}
</script>

<style lang="scss" scoped>
.itemBodys {
  position: relative;
  width: calc(100% - 0px);
  height: calc(100% - 0px);
  margin: 0 auto;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: nowrap;
  flex-direction: row;
  align-content: flex-start;
}
</style>

组件代码

<template>
  <div className="echarts1" ref="echarts">

  </div>
</template>

<script>
import * as echarts from "echarts";

export default {
  name: 'echarts1',
  components: {},
  watch: {
    xData() {
      this.drawEcharts()
    },
    yData() {
      this.drawEcharts()
    },
  },
  props: {
    list: {
      type: Array,
      default() {
        return [];
      }
    }
  },
  mounted() {
    this.drawEcharts()
  },
  computed: {
    xData: function () {
      var list = []
      this.list.forEach((type) => {
        list.push(type.title)
      });
      return list
    },
    yData: function () {
      var list = []
      this.list.forEach((type) => {
        var data = {
          value: type.value
        }
        list.push(data)
      });
      return list
    },
  },
  methods: {
    drawEcharts() {
      var that = this
      window.addEventListener('resize', this.drawEcharts)
      let myChart = echarts.init(this.$refs.echarts)
      var spliceStr = function (value, len) {
        if (value.length <= len) {
          return value
        }

        var newValue = "";
        var k = 0;
        for (var i = Math.ceil(value.length / len); i > 0; i--) {

          newValue += value.substr(k, len) + (i == 1 ? '' : '\n');
          k += len;

        }
        return newValue;
      }
      var option = {
        textStyle: {
          color: '#c0c3cd',
          fontSize: 14,
        },
        color: ['#00D7E9', 'rgba(0, 215, 233, 0.9)'],
        grid: {
          containLabel: true,
          left: 20,
          right: 20,
          bottom: 0,
          top: 40,
        },
        xAxis: {
          nameTextStyle: {
            color: '#c0c3cd',
            padding: [0, 0, -10, 0],
            fontSize: 13,
          },
          axisLabel: {
            color: 'rgba(149, 201, 255, 1)',
            fontSize: 13,
            interval: 0,
            lineHeight: 20,
            formatter: function (value) {
              return spliceStr(value, 4)
            },
          },
          axisTick: {
            show: false,
            lineStyle: {
              color: '#384267',
              width: 1,
            },
          },
          splitLine: {
            show: false,
          },
          axisLine: {
            lineStyle: {
              color: '#335971',
            },
            show: true,
          },
          data: this.xData,
          type: 'category',
        },
        yAxis: {
          name: '册',
          nameTextStyle: {
            color: 'rgba(11, 255, 168, 1)',
            padding: [0, 0, 0, 0],
            fontSize: 12,
          },
          axisLabel: {
            color: 'rgba(149, 201, 255, 1)',
            fontSize: 12,
            interval: 0,
            fontFamily: 'OPPOSans'
          },
          axisTick: {
            lineStyle: {
              color: '#668092',
              width: 0,
            },
            show: true,
          },
          splitLine: {
            show: true,
            lineStyle: {
              color: '#335971',
              "type": "dashed"
            },
          },
          axisLine: {
            lineStyle: {
              color: 'rgba(8, 46, 124, 1.00)',
              width: 1,
              type: "dashed"
            },
            show: false,
          }
        },
        series: [
          {
            data: this.yData,
            barWidth: '100%',
            type: "pictorialBar",
            barCategoryGap: "100%",
            symbol: "path://M0,10 L10,10 C5.5,10 5.5,5 5,0 C4.5,5 4.5,10 0,10 z",
            itemStyle: {
              color: {
                x: 0,
                y: 1,
                x2: 0,
                y2: 0,
                type: 'linear',
                colorStops: [
                  {
                    offset: 0,
                    color: 'rgba(18, 99, 255, 1)',
                  },
                  {
                    offset: 1,
                    color: 'rgba(4, 206, 247, 1)',
                  },
                ],
              },
            },
            label: {
              show: false,
              position: 'top',
              distance: 10,
              color: '#fff',
              fontFamily: 'DIN-bold'
            },
          }
        ],
        tooltip: {
          show: true,
          trigger: 'axis',
          formatter: '{b}:{c0}',
        },
      };
      myChart.clear()
      myChart.resize()
      myChart.setOption(option)
    },
  }
}
</script>

<style lang="scss" scoped>
.echarts1 {
  position: relative;
  width: 100%;
  height: calc(100% - 20px);
}
</style>


关联的数据大屏

酒店数据可视化大屏

更多柱状图效果

echarts 柱状图效果实例汇总

喜欢 (0)