echarts模板二

一、界面效果

 二、代码实现

数据：

newData: {
        ydata: [
          { name: "8080",
            value: 1000,
          },
          {
            name: "28",
            value: 2000,
          },
          {
            name: "6979",
            value: 3000,
          },
          {
            name: "9448",
            value: 4000,
          },
          {
            name: "22",
            value: 5000,
          },
          {
            name: "7850",
            value: 6000,
          },
          {
            name: "2889",
            value:7000,
          },
          {
            name: "9443",
            value: 8000,
          },
           {
            name: "2889",
            value: 9000,
          },
           {
            name: "2889",
            value: 10000,
          },
        ],
      },

echarts代码：

this.options = {
        backgroundColor:'rgba(123, 123, 212, 0.342)',
        xAxis: {
          max: this.total,
          splitLine: {
            show: false,
          },
          axisLine: {
            show: false,
          },
          axisLabel: {
            show: false,
          },
          axisTick: {
            show: false,
          },
        },
        grid: {
          left: 85,
          top: 20, // 设置条形图的边距
          right: 30,
          bottom: 20,
        },
        yAxis: [
          {
            type: "category",
            inverse: false, //是否反向坐标轴
            data: this.newData.ydata,

            //坐标轴线相关设置
            axisLine: {
              show: false,
            },
            //坐标轴刻度相关设置
            axisTick: {
              show: false,
            },
            //坐标轴刻度标签的相关设置
            axisLabel: {
              show: false,
            },
          },
        ],
        series: [
          {
            // 内
            type: "bar",
            barWidth: 18,
            legendHoverLink: false, //是否启用图例 hover 时的联动高亮
            silent: true, //?
            itemStyle: {
              normal: {
                //   柱条颜色
                color: {
                  type: "linear",
                  x: 0,
                  y: 0,
                  x2: 1,
                  y2: 0,
                  colorStops: [
                    {
                      offset: 0,
                      color: "#3BECFB", // 0% 处的颜色
                    },
                    {
                      offset: 1,
                      color: "#FEE190", // 100% 处的颜色
                    },
                  ],
                },
              },
            },
            label: {
              normal: {
                fontWeight:800,
                fontFamily:'Avenir-Heavy, Avenir',
                show: true, //是否显示标签
                position: [-59, 2], //标签的位置
                formatter: "{b}", //标签内容格式器，支持字符串模板和回调函数两种形式，字符串模板与回调函数返回的字符串均支持用 \n 换行
                textStyle: {
                  color: "#00D7EC",
                  fontSize: 18,
                   
                },
              },
            },
            data: this.newData.ydata,
            z: 1, //柱状图组件的所有图形的z值。控制图形的前后顺序。
            animation: true,
            animationEasing: "elasticOut", //初始动画的缓动效果。不同的缓动效果可以参考
          },
          {
            // 分隔
            type: "pictorialBar",
            itemStyle: {
              normal: {
                color: "#061348",
              },
            },

            symbolRepeat: "fixed",//元素重复
            FileSystemDirection:'end',
            symbolMargin: 3,  //图形的两边间隔
            symbol: "rect",//图形类型
            symbolClip: true,
            symbolSize: [1, 20],//图形大小[宽,高]
            symbolPosition: "start", //图形定位
            symbolOffset: [0, 0], //图形相对原位置的偏移
            symbolBoundingData: this.total,//是图形绘制的界限
            data: this.newData.ydata,
            z: 2,
            animationEasing: "elasticOut",
          },
        ],
      };