标签：linear no color gradient 柱状图 007bff echarts left

1. Card四角边框。
2. 标题背景颜色及字体颜色。
3. x轴、y轴字体颜色及字体大小。
4. 背景网格。
5. 背景色。
6. 柱状渐变色。

<div class="card">
	<div class="card-head"><span style="margin: 0 20px;">隐患趋势</span></div>
  	<div class="card-body" id="main" style="height:210px;"></div>
</div>

// Card四角边框。
.card{
  width: 476px;
  padding:1px;
  background: linear-gradient(to left, #007bff, #007bff) left top no-repeat, 
      linear-gradient(to bottom, #007bff, #007bff) left top no-repeat, 
      linear-gradient(to left, #007bff, #007bff) right top no-repeat,
      linear-gradient(to bottom, #007bff, #007bff) right top no-repeat, 
      linear-gradient(to left, #007bff, #007bff) left bottom no-repeat,
      linear-gradient(to bottom, #007bff, #007bff) left bottom no-repeat,
      linear-gradient(to left, #007bff, #007bff) right bottom no-repeat,
      linear-gradient(to left, #007bff, #007bff) right bottom no-repeat;
  background-size: 1px 20px, 20px 1px, 1px 20px, 20px 1px; 
  box-shadow: 0 1px 1px rgba(0 0 0 / 5%);
  border-radius:5px;
  border: 1px solid rgba(50, 105, 89, 0.17);
}
// 标题背景颜色及字体颜色。
.card-head{
  height: 40px;
  width: 100%;
  background-color: #011643;
  line-height: 40px;
  color: #ccc;
}
// 图表背景色。
.card-body{
  width: 100%;
  background-color: #04133a;
}

// 柱状渐变色。
let colors = [{
  borderColor: "rgba(227,161,96,1)",
  start: "red",
  end: "#fdabab"
},
{
  borderColor: "rgba(0,222,255,1)",
  start: "red",
  end: "#fdabab"
},
];
// 指定图表的配置项和数据
var option = {
  animation: false,
  grid: {
    top: 40,
    left: 50,
    right: 40,
    bottom: 50
  },
  lineStyle: {
    type: 'solid'
  },
  title: {
    show: false,
    text: 'ECharts 入门示例',
    textStyle: {
      align: 'center',
      color: '#fff',
      fontSize: 20,
    },
    top: '5%',
    left: 'center',
  },
  tooltip: {},
  legend: {
    data: ['销量'],
    show: false
  },
  xAxis: {
    data: ["2012", "2013", "2014", "2015", "2016", "2017"],
    // 背景网格。
    splitLine: {
      show: true,
      lineStyle: {
        color: '#1b315a'
      }
    },
    // x轴字体颜色及字体大小。
    axisLabel: {
      color: '#1b315a',
      "textStyle": {
        "color": "#ccc",
        "fontSize": 14
      }
    },
    minorTick: {
      show: true
    },
    minorSplitLine: {
      show: true
    }
  },
  yAxis: {
    name: "近几年趋势（人）",
    nameTextStyle: {
      color: "#ccc"
    },
    // 背景网格。
    splitLine: {
      lineStyle: {
        color: '#1b315a'
      }
    },
    axisTick: {
      lineStyle: {
        color: '#1b315a',
      }
    },
    axisLine: {
      lineStyle: {
        color: '#1b315a',
      }
    },
    // y轴字体颜色及字体大小。
    axisLabel: {
      color: '#1b315a',
      "textStyle": {
        "color": "#ccc",
        "fontSize": 14
      }
    },
  },
  series: [{
    name: '销量',
    type: 'bar',
    data: [5, 20, 36, 10, 10, 20],
    barWidth: 10,
    itemStyle: {
      normal: {
      	// 柱状渐变色。
        color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
          offset: 0,
          color: colors[0].start
        },
        {
          offset: 1,
          color: colors[0].end
        }
        ]),
      }
    },
  }]
};

标签：linear,no,color,gradient,柱状图,007bff,echarts,left
来源： https://blog.csdn.net/weixin_40095485/article/details/117561153

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。