liyongli
/
jugou


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270
							<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>ECharts</title>
    <!-- 引入 echarts.js -->
    <script src="./js/echarts.js"></script>
</head>

<body>
    <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
    <div id="main" style="width: 600px;height:400px;"></div>
    <script type="text/javascript">
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('main'));

        // 指定图表的配置项和数据
        option = {

            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    animation: false
                }
            },
            legend: {
                data: ['流入', '流出', '收视率%'],
                left: 'center',
                textStyle: {
                    color: '#000000',
                    fontSize: 12,
                },
            },

            axisPointer: {
                link: {
                    xAxisIndex: 'all'
                }
            },

            dataZoom: [{
                show: true,
                realtime: true,
                start: 30,
                end: 70,
                xAxisIndex: [0, 1],
                zoomOnMouseWheel: false,
            }],
            grid: [{
                left: 50,
                right: 50,
                height: '35%',
                tooltip: {
                    show: true
                }

            }, {
                left: 50,
                right: 50,
                top: '55%',
                height: '35%'
            }],

            xAxis: [{
                position: "top",
                type: 'category',
                boundaryGap: true,
                axisLine: {
                    onZero: true
                },
                data: [1, 2, 3, 4, 5, 6, 7, 8, 1, 2, 3, 4, 5, 6, 7, 8, 1, 2, 3, 4, 5, 6, 7, 8]
            }, {

                offset: 200,
                show: false,
                gridIndex: 1,
                type: 'category',
                boundaryGap: true,
                axisLine: {
                    onZero: true
                },
                data: [1, 2, 3, 4, 5, 6, 7, 8, 1, 2, 3, 4, 5, 6, 7, 8, 1, 2, 3, 4, 5, 6, 7, 8],
                position: 'top'
            }],
            yAxis: [{
                type: 'value',
                name: '流入',
            }, {
                type: 'value',
                name: '流出',
                gridIndex: 1,
                inverse: true,
            }, {
                type: 'value',
                name: '收视率%',
            }],
            series: [{
                name: '流入',
                type: 'bar',
                hoverAnimation: false,
                data: [1, 2, 3, 4, 5, 6, 7, 8, 1, 2, 3, 4, 5, 6, 7, 8, 1, 2, 3, 4, 5, 6, 7, 8]
            }, {
                name: '流出',
                type: 'bar',
                xAxisIndex: 1,
                yAxisIndex: 1,
                hoverAnimation: false,
                data: [1, 2, 3, 4, 5, 6, 7, 8, 1, 2, 3, 4, 5, 6, 7, 8, 1, 2, 3, 4, 5, 6, 7, 8]

            }, {
                name: '收视率%',
                type: 'line',
                yAxisIndex: 2,
                hoverAnimation: false,
                data: [11, 21, 31, 41, 51, 61, 71, 81, 11, 21, 31, 41, 51, 61, 71, 81, 11, 21, 31, 41, 51, 61, 71, 81]
            }]
        };


        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
        myChart.on('datazoom', function(params) {
            var xAxis = myChart.getModel().option.xAxis[0];
            var endTime = xAxis.data[xAxis.rangeStart];
            console.log(endTime);
        });
    </script>
</body>

</html>

<!--option = {
              // backgroundColor: 'rgba(0,0,0,.8)',
              legend: {
                  data: ['流入', '流出', '收视率%'],
                  bottom: '10%',
                  left: 'center',
                  textStyle: {
                      color: '#000000',
                      fontSize: 12,
                  },
              },
              title: {
                  text: '流入/流出',
                  left: 5,
                  bottom: '13%',
                  textStyle: {
                      color: '#000000',
                      fontSize: 12,
                  },
              },
              tooltip: {
                  show: true,
                  trigger: 'axis'
              },
              xAxis: {
                  data: canvas.Xdata(time),
                  position: "top",
                  axisLine: {
                      show: false,
                      onZero: true,
                  },
                  splitLine: {
                      show: false
                  },
                  splitArea: {
                      show: false
                  },
                  axisTick: {
                      show: false
                  },
                  axisLabel: {
                      rotate: -80,
                      interval: 0,
                      textStyle: {
                          color: '#000000',
                      }
                  },
              },
              yAxis: [{
                  type: 'value',
                  //name:'流入/流出',
                  offset: -5,
                  axisLine: {
                      show: false
                  },
                  splitLine: {
                      show: false
                  },
                  splitArea: {
                      show: false
                  },
                  axisTick: {
                      show: false
                  },
                  axisLabel: {
                      textStyle: {
                          color: '#000000',
                      }
                  },
                  nameTextStyle: {
                      color: '#000000',
                  },
              }, {
                  type: 'value',
                  scale: true,
                  offset: -30,
                  axisLine: {
                      show: false
                  },
                  splitLine: {
                      show: false
                  },
                  splitArea: {
                      show: false
                  },
                  axisTick: {
                      show: false
                  },
                  axisLabel: {
                      textStyle: {
                          color: '#000000',
                      }
                  },
                  nameLocation: 'middle',
                  nameTextStyle: {
                      color: '#000000',
                  },
              }],
              grid: {
                  left: '12%',
                  width: '85%',
                  height: '50%',
              },
              series: [{
                      name: '流入',
                      type: 'bar',
                      stack: 'one',
                      barWidth: 5,
                      itemStyle: itemStyle,
                      label: {
                          emphasis: {
                              show: true,
                              position: 'top',
                              textStyle: {
                                  color: '#000000',
                                  fontSize: 14,
                              },
                          },
                      },
                      data: line2
                  }, {
                      name: '流出',
                      type: 'bar',
                      stack: 'one',
                      barWidth: 5,
                      itemStyle: itemStyle,
                      data: line1
                  }, {
                      name: '收视率%',
                      type: 'line',
                      stack: 'two',
                      yAxisIndex: 1,
                      itemStyle: itemStyle,
                      data: line3
                  },

              ]
          };-->