ECharts数据可视化柱状图(渐变色)

用户统计 (users) -柱状图

完整js代码:

// 柱形图模块
(function() {
   
  var item = {
   
    name: "",
    value: 1200,
    // 1. 修改当前柱形的样式
    itemStyle: {
   
      color: "#254065"
    },
    // 2. 鼠标放到柱子上不想高亮显示
    emphasis: {
   
      itemStyle: {
   
        color: "#254065"
      }
    },
    // 3. 鼠标经过柱子不显示提示框组件
    tooltip: {
   
      extraCssText: "opacity: 0"
    }
  };
  // 1. 实例化对象
  var myChart = echarts.init(document.querySelector(".bar"));
  // 2. 指定配置和数据
  var option = {
   
    color: new echarts.graphic.LinearGradient(
      // (x1,y2) 点到点 (x2,y2) 之间进行渐变
      0,
      0,
      0,
      1,
      [
        {
    offset: 0, color: "#00fffb" }, // 0 起始颜色
        {
    offset: 1, color: "#0061ce" } // 1 结束颜色
      ]
    ),
    tooltip: {
   
      trigger: "item"
    },
    grid: {
   
      left: "0%",
      right: "3%",
      bottom: "3%",
      top: "3%",
      //  图表位置紧贴画布边缘是否显示刻度以及label文字 防止坐标轴标签溢出跟grid 区域有关系
      containLabel: true,
      // 是否显示直角坐标系网格
      show: true,
      //grid 四条边框的颜色
      borderColor: "rgba(0, 240, 255, 0.3)"
    },
    xAxis: [
      {
   
        type: "category",
        data: [
          "上海",
          "广州",
          "北京",
          "深圳",
          "合肥",
          "",
          "......",
          "",
          "杭州",
          "厦门",
          "济南",
          "成都"