ホームページ > 記事 > ウェブフロントエンド > Echarts は動的に色を変更するヒストグラムを実装します

Echarts は動的に色を変更するヒストグラムを実装します

php中世界最好的语言オリジナル: 2018-04-19 16:43:118399ブラウズ

今回は、動的に色を変更するヒストグラムを実装するための Echart について説明します。Echart が動的に色を変更するヒストグラムを実装するための注意事項とは何ですか? ここでは実際のケースを見てみましょう。

レンダリング:

<!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 中国語 Web サイトの他の関連記事に注目してください。

推奨読書:

jQuery 操作の背景色のグラデーションアニメーション効果

jQuery プラグイン FusionCharts の円グラフ描画

jQuery 操作のテキストエリアの入力単語制限

以上がEcharts は動的に色を変更するヒストグラムを実装しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

php jquery echarts

声明：

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

前の記事：jqueryは全選択と逆単一選択を実装します次の記事：jqueryは全選択と逆単一選択を実装します

続きを見る