検索

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

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

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

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

レンダリング:

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

推奨読書:

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

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

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

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

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

関連記事

続きを見る