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
        }
        ]),
      }
    },
  }]
};