Echarts模板三

一、界面效果

二、代码内容

数据内容：

ydata: [
          { name: "7190", value: 1000 },
          {
            name: "3389",
            value: 2000,
          },
          {
            name: "6392",
            value: 3000,
          },
          {
            name: "5186",
            value: 4000,
          },
          {
            name: "5701",
            value: 5000,
          },
          {
            name: "5186",
            value: 6000,
          },
          {
            name: "6069",
            value: 7000,
          },
          {
            name: "59420",
            value: 8000,
          },
          {
            name: "5060",
            value: 9000,
          },
          {
            name: "1900",
            value: 10000,
          },
        ]

echarts代码内容：

this.options = {
       
        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: 6,
            legendHoverLink: false, //是否启用图例 hover 时的联动高亮
            silent: true, //?
            itemStyle: {
              normal: {
                   barBorderRadius:[0,7,7,0],
                //   柱条颜色
                color:new this.$echarts.graphic.LinearGradient(-0.15,3, 1, 1, [
                    { offset: 0, color: "rgba(1, 4, 41, 0.52)" },
                    { offset: 0.26, color: "rgba(15, 91, 113, 0.81)" },
                     { offset: 0.94, color: "rgba(37, 231, 229, 0.99)" },
                    { offset: 1, color: "rgba(123, 219, 217, 1)" }
                  ])
              
              },
            },
            label: {
              normal: {
                fontWeight:800,
                fontFamily:'Avenir-Heavy, Avenir',
                show: true, //是否显示标签
                position: [-60, -4], //标签的位置
                formatter: "{b}", //标签内容格式器，支持字符串模板和回调函数两种形式，字符串模板与回调函数返回的字符串均支持用 \n 换行
                textStyle: {
                  color: "#00D7EC",
                  fontSize: 18,
                   
                },
              },
            },
            data: this.newData.ydata,
            z: 1, //柱状图组件的所有图形的z值。控制图形的前后顺序。
            animation: true,
            animationEasing: "elasticOut", //初始动画的缓动效果。不同的缓动效果可以参考
          },
          
        ],
      };