首页 > 文章 > web前端 > Echarts实现动态变色柱状图

Echarts实现动态变色柱状图

php中世界最好的语言原创: 2018-04-19 16:43:118400浏览

这次给大家带来Echarts实现动态变色柱状图，Echarts实现动态变色柱状图的注意事项有哪些，下面就是实战案例，一起来看一下。

效果图：

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

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

相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！