Echarts图表实现X轴自动滚动加载数据，怎么使用图例,怎么在柱状图添加圆形顶部

☑Echarts图表实现X轴自动滚动加载数据

1.用到了Echarts图表自带的dataZoom组件

2.使用定时器定时刷新数据

效果图

关键代码

javascript 复制代码

 dataZoom: [
       {
           xAxisData: 0,//这里是从X轴的0刻度开始
           show: false,//是否显示滑动条
           type: 'slider', // 这个 dataZoom 组件是 slider 型 dataZoom 组件
           startValue: 0, // 从头开始。
           endValue: 4  // 一次性展示5个。
       }
 ],

javascript 复制代码

  setInterval(function () {
        if (xAxisData.length < 4) { return } else {
            // 每次向后滚动一个，最后一个从头开始。
            if (option.dataZoom[0].endValue == xAxisData.length) {
                option.dataZoom[0].endValue = 4;
                option.dataZoom[0].startValue = 0;
            }
            else {
                option.dataZoom[0].endValue = option.dataZoom[0].endValue + 1;
                option.dataZoom[0].startValue = option.dataZoom[0].startValue + 1;
                if (option.dataZoom[0].endValue == xAxisData.length) {
                    option.dataZoom[0].endValue = 4;
                    option.dataZoom[0].startValue = 0;
                }
            }
            myChart.setOption(option);
        }
    }, 5000);

以下是全部代码

html 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>图表</title>
</head>

<body>
    <div>
        <div id="container" style="height:700px;width: 700px;background-color: black;"></div>
    </div>
</body>

</html>

<script src="./echarts.min.js"></script>

<script>
    var chartDom = document.getElementById('container');
    var myChart = echarts.init(chartDom);
    var option;
    var xAxisData = ["01-01","01-02","01-03","01-04","01-05","01-06","01-07","01-08","01-09","01-10"]
    var zongchang = 10
    var zongce = 5
    var data1 = [10,20,30,40,0,5,40,3,2,50]
    var data2 = [10,20,10,40,0,10,20,30,40,50]
    option = {
        legend: {
            y: 'bottom',
            x: 'center',
            data: ['在册人数5人', '在场人数10人',],
            textStyle: {
                color: "#fff"
            }
        },
        tooltip: {},
        xAxis: {
            data: xAxisData,
            axisLabel: {
                textStyle: {
                    fontSize: 15
                },
            },
            axisLine: {
                lineStyle: {
                    color: '#19ECFF',
                },
            }
        },
        dataZoom: [
            {
                xAxisData: 0,//这里是从X轴的0刻度开始
                show: false,//是否显示滑动条
                type: 'slider', // 这个 dataZoom 组件是 slider 型 dataZoom 组件
                startValue: 0, // 从头开始。
                endValue: 4  // 一次性展示5个。
            }
        ],
        yAxis: {
            splitLine: {
                show: false,
            },
            axisLine: {
                lineStyle: {
                    color: '#19ECFF',
                }
            }
        },
        grid: {
            bottom: 50
        },
        series: [
            {
                name: '在册人数' + zongce + '人',
                type: 'bar',
                data: data1,
                barWidth: 20,
                itemStyle: {
                    normal: {
                        color: "#ffac36",
                        barBorderRadius: [15, 15, 0, 0],
                    }
                }
            },
            {
                name: '在场人数' + zongchang + '人',
                type: 'bar',
                data: data2,
                barWidth: 20,
                itemStyle: {
                    normal: {
                        color: "#00a0e9",
                        barBorderRadius: [15, 15, 0, 0]
                    }
                }
            },
        ]
    };
    option && myChart.setOption(option);

    setInterval(function () {
        if (xAxisData.length < 4) { return } else {
            // 每次向后滚动一个，最后一个从头开始。
            if (option.dataZoom[0].endValue == xAxisData.length) {
                option.dataZoom[0].endValue = 4;
                option.dataZoom[0].startValue = 0;
            }
            else {
                option.dataZoom[0].endValue = option.dataZoom[0].endValue + 1;
                option.dataZoom[0].startValue = option.dataZoom[0].startValue + 1;
                if (option.dataZoom[0].endValue == xAxisData.length) {
                    option.dataZoom[0].endValue = 4;
                    option.dataZoom[0].startValue = 0;
                }
            }
            myChart.setOption(option);
        }
    }, 5000);
</script>

☑怎么使用图例

是否使用图例

切换图例图标

circle 圆

rect 正方形

roundRect 圆角正方形

triangle三角形

diamond 菱形

pin 地图坐标

base64图片或者svg路径

☑怎么在柱状图添加圆形顶部

javascript 复制代码

在series中加入
   {
      name: '底部圆柱',
      type: 'bar',
      data: data,
      barWidth:22,
      itemStyle:{
        normal: {
                color: new echarts.graphic.LinearGradient(
                0, 0, 0, 1, 
                  [
                      {offset: 0, color: '#005FFF'},   
                      {offset: 1, color: '#97BEFF'}  
                  ]
                 ),
                },
       }
    },
          //顶部圆形
    {
              data:data,
              type: 'pictorialBar',
              barMaxWidth: 'auto',
              symbolPosition: 'end', // 位置在柱状图顶部
              symbolOffset: ['-65%', '-50%'], // 下移一半，遮住柱状图顶部
              symbolSize: [22, 10],
              zlevel: 200, // 菱形图形显示在柱状图之上
              itemStyle: {
                  color: {
                      x: 0,
                      y: 0,
                      x2: 0,
                      y2: 1.3,
                      type: 'linear',
                      global: false,
                      colorStops: [
                          {
                              offset: 0,
                              color: '#005FFF',
                          },
                          {
                              offset: 1,
                              color: 'rgba(255, 255, 255, 1)'
                          },
                     ],
                 },
             }
        },

就成了这样