echarts实现颜色渐变条形图效果代码-html代码-BFW代码库

echarts实现颜色渐变条形图效果代码

代码语言：html

所属分类：图表

代码描述：echarts实现颜色渐变条形图效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开


<!DOCTYPE html>
<html lang="en" >

<head>

  <meta charset="UTF-8">

  
  
<style>
#main {
  width: 1000px;
  height: 400px;
  background: black;
}
</style>



</head>

<body  >

<div id="main"></div>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/echarts-4.2.1.min.js"></script>
  
      <script >
function renderItem(params, api) {
  let topCenter = api.coord([api.value(0), api.value(1)]);
  let width = api.size([1, 0])[0] * api.value(2) / 100;
  let height = api.size([1, api.value(1)])[1];
  return {
    type: 'group',
    children: [{
      type: 'rect',
      shape: {
        x: topCenter[0] - width * 0.8,
        y: topCenter[1],
        width: width * 1.6,
        height: height },

      style: api.style() },
    {
      type: 'circle',
      shape: {
        cx: topCenter[0],
        cy: topCenter[1],
        r: width * 1.6 },

      // style: api.style(),
      style: api.style({ fill: '#FEC' }) },
    {
      type: 'circle',
      shape: {
        cx: topCenter[0],
        cy: topCenter[1],
        r: width * 0.8 },

      style: api.style({ fill: 'rgba(255, 64, 0, 1)' }) }] };


}
const data = [{
  year: '2013',
  value: Math.round(Math.random() * 4000) },
{
  year: '2014',
  value: Math.round(Math.random() * 4000) },
{
  year: '2015',
  value: Math.round(Math.random() * 4000) },
{
  year: '2016',
  value: Math.round(Math.random() * 4000) },
{
  year: '2017',
  value: Math.round(Math.random() * 4000) }];


const maxValue = 4000;

const seriesForBg = {
  name: 'background',
  type: 'bar',
  animation: false,
  barWidth: '20%',
  silent: true,
  data: data.map(d => {
    return {
      value: maxValue,
      itemStyle: {
        barBorderRadius: [25, 25, 0, 0],
        color: 'rgba(0,0,0,1)',
        shadowColor: 'rgba(255, 127, 0, 0.7)',
       .........完整代码请登录后点击上方下载按钮下载查看