Echarts は動的に色を変更するヒストグラムを実装します-jsチュートリアル-php.cn

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

php中世界最好的语言

リリース： 2018-04-19 16:43:11

オリジナル

8476 人が閲覧しました

今回は、動的に色を変更するヒストグラムを実装するための 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 サイトの他の関連記事を参照してください。