jQuery插件Echarts实现的渐变色柱状图

2019-11-19 17:04:04

字体：大中小

来源：转载

供稿：网友

效果图：

代码如下：

<!DOCTYPE html><html><head>  <meta charset="utf-8">  <title>ECharts柱状图</title>  </head><body>  <!-- 为ECharts准备一个具备大小（宽高）的Dom -->  <div id="container" style="width: 600px;height:400px; margin: 100px auto 20px;"></div>  <script typet="text/javascript" src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script>  <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/echarts-all-3.js"></script>   <script type="text/javascript">    var dom = document.getElementById("container");    var myChart = echarts.init(dom);    option = null;        var xAxisData = [];    var data = [];    for (var i = 20; i < 29; i++) {      xAxisData.push('2' +'/'+ i);      data.push(Math.round(Math.random() * 500) + 200);    }    // 初始 option    option = {      title: {        text: '每日成交额（万元）'      },      tooltip: {        trigger: 'axis',                borderColor: '#636F7F',        borderWidth : 1,        backgroundColor : 'rgba(99,111,127,1)',        textStyle:{          color : '#ffffff',          // fontWeight : 'bold',          fontSize : 14,          },        transitionDuration : 0.6,                formatter: '{b0}<br />{c0}(万元)',                axisPointer :{          type : 'line',          lineStyle : {            color : '#05F41E',            width : 1,            type : 'solid',          },        },        // axisPointer : {      // 坐标轴指示器，坐标轴触发有效        //   type : 'shadow',    // 默认为直线，可选为：'line' | 'shadow'        //   shadowStyle :{        //     color : '#D6EAFA',        //     opacity : 0.5,        //   }        // },      },      calculable : true,      xAxis: {        data: xAxisData.map(function(x){          return x;                  }),        axisLabel: {          textStyle: {            color: '#333',            align : 'center',            baseline : 'top'          },          rotate : 20,          margin : 15,        },      },       yAxis: {                // 横向标线 默认为TRUE        splitLine: {          show: true,        },        axisLabel: {          textStyle: {            color: '#333'          }        },        type : 'value',        boundaryGap : false,        // 分隔线线的类型        splitLine: {          show: true,          lineStyle :{            color : '#EFF0F0',            type : 'dashed',          }        }      },      series: {        type: 'bar',        data: data,        barWidth: 15,        itemStyle: {          normal: {            barBorderRadius: 20,            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{              offset: 0,              color: '#37BBF8'            }, {              offset: 1,              color: '#2294E4'            }]),            // shadowColor: 'rgba(35,149,229,0.8)',            // shadowBlur: 20,            areaStyle: {type: 'default'}          }        }      },          };    if (option && typeof option === "object") {      myChart.setOption(option, true);    }  </script></body></html>

以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持武林网！

上一篇：js中toString()和String()区别详解

下一篇：javascript实现圣旨卷轴展开效果（代码分享）