Echart柱状图模板

康康认识吗

已于 2023-11-21 16:45:16 修改

阅读量70

点赞数

文章标签： echarts javascript ecmascript

于 2023-11-21 16:41:26 首次发布

本文链接：https://blog.csdn.net/weixin_44822684/article/details/134535568

版权

Echart柱状图模板，更新中。

var cost = [1,3, 2, 4, 5]; //数据
var totalCost = [10, 10, 10, 10, 10]; //总长
var visits = [1, 2, 3, 5, 4]; //类目
var data = {
  cost: cost,
  totalCost: totalCost,
  visits: visits,
};
option = {
  backgroundColor: "#05274C",
  title: {
    top: "2%",
    left: "center",
    textStyle: {
      align: "center",
      color: "#4DCEF8",
      fontSize: 18,
    },
  },
  grid: {
    left: "130",
    right: "100",
  },
  xAxis: {
    show: false,
  },
  yAxis: {
    type: "category",
    inverse: true,   //控制y轴排序
    axisLabel: {
      margin: 30,
      show: true,
      color: "#4DCEF8",
      fontSize: 14,
    },
    axisTick: {
      show: false,
    },
    axisLine: {
      show: false,
    },
    data: data.visits,
  },
  series: [
    {
      type: "bar",
      barGap: "-65%",
      label: {
        normal: {
          show: true,
          position: "right",
          color: "#fff",
          fontSize: 14,
          formatter: function (param) {
            return data.cost[param.dataIndex];
          },
        },
      },
      barWidth: "30%",
      itemStyle: {
        normal: {
          borderColor: "#4DCEF8",
          borderWidth: 2,
          barBorderRadius: 15,
          color: "rgba(102, 102, 102,0)",
        },
      },
      z: 1,
      data: data.totalCost,
      // data: da
    },
    {
      type: "bar",
      barGap: "-85%",
      barWidth: "21%",
      itemStyle: {
        normal: {
          barBorderRadius: 16,
          color: function (params) {
              if(params.data <= 10){
                    return('hsla('+ (230 - params.data * 28)+','+ '80%'+','+ '50%'+','+ (params.data*100 )+')');
              }else{
                   return('rgba(168,25,230,100)');
              } 
            }
        },
      },
      max: 100,
    //   label: {
    //     normal: {
    //       show: true,
    //       position: "inside",
    //       formatter: "{c}",
    //     },
    //   },
      labelLine: {
        show: true,
      },
      z: 2,
      data: data.cost,
    },
  ],
};

图表

图2

let colorlist = []
function hslaTo(h) {
                  var h = h ;
                  colorlist.push(h);
                  return h;
                }
console.log(colorlist);
var datas = [1, 2, 7, 4, 8,6,3,5,9,10,11];
var titlename = ["1", "1", "3", "4", "5","1", "1", "3", "4", "5","11"];
option = {
      backgroundColor: 'rgba(0,0,0,0)',
      grid: {
        top: "10%",
        right: "10%",
        left: "10%",
        bottom: "10%",
      },
        dataZoom: [
          //滑动条
          {
            yAxisIndex: 0, //这里是从X轴的0刻度开始
            show: false, //是否显示滑动条，不影响使用
            type: "slider", // 这个 dataZoom 组件是 slider 型 dataZoom 组件
            startValue: 0, // 从头开始。
            endValue: 4, // 一次性展示5个。
          },
        ],
  xAxis: {
    show: false,
  },
  yAxis: [
    {
      show: true,
      data: titlename,
      inverse: true,
      axisLine: {
        show: false,
      },
      splitLine: {
        show: false,
      },
      axisTick: {
        show: false,
      },
      axisLabel: {
        textStyle: {
          color: function (value, index) {
           if(datas[index] <= 10){
                  return('hsla('+ (230 - datas[index] * 28)+','+ '80%'+','+ '50%'+','+ (datas[index] *100 )+')');
              }else{
                   return('rgba(168,25,230,100)');
              }
          },
        },
        formatter: function (value, index) {
          return ["{title|" + value + "} "].join("\n");
        },
        rich: {},
      },
    },
    {
      show: true,
      inverse: true,
      data: datas,
      axisLabel: {
        textStyle: {
          color: function (value, index) {
                if(value <= 10){
                    return('hsla('+ (230 - value * 28)+','+ '80%'+','+ '50%'+','+ (value *100 )+')');
              }else{
                   return('rgba(168,25,230,100)');
              }
          },
        },
      },
      axisLine: {
        show: false,
      },
      splitLine: {
        show: false,
      },
      axisTick: {
        show: false,
      },
    },
  ],

  series: [
    {
      name: "条",
      type: "bar",
      yAxisIndex: 0,
      data: datas,
      barWidth: '40%',
      itemStyle: {
        normal: {
          barBorderRadius: 30,
          color: function (params) {
           if(params.data <= 10){
                    let a = ('hsla('+ (230 - params.data * 28)+','+ '80%'+','+ '50%'+','+ (params.data *100 )+')');
                    return(hslaTo(a));
              }else{
                   let a = 'rgba(168,25,230,100)'
                   return(hslaTo(a));
              }
          },
        },
      },
      label: {
        normal: {
          show: true,
          position: 'right',
          formatter: "{c}",
        },
      },
    },
  ],
};
    setInterval(function () {
        // 每次向后滚动一个，最后一个从头开始。
        // console.log(option.dataZoom[0].endValue);
        // console.log("---"+KSMC.length);
        
    if (option.dataZoom[0].endValue == datas.length) {
          option.dataZoom[0].endValue = 4;
          option.dataZoom[0].startValue = 0;
    } else {
          option.dataZoom[0].endValue = option.dataZoom[0].endValue + 1;
          option.dataZoom[0].startValue = option.dataZoom[0].startValue + 1;
        }
        myChart.setOption(option);
    }, 10000);

图表