web数据可视化(Echarts版)3-6 图例组件(滚动效果)(代码仅供参考)

白日梦想家☜

已于 2023-05-19 12:36:01 修改

阅读量290

点赞数

分类专栏： HTML 文章标签： echarts 前端信息可视化

于 2023-05-18 22:32:45 首次发布

本文链接：https://blog.csdn.net/m0_63471474/article/details/130756667

版权

HTML 专栏收录该内容

40 篇文章 15 订阅

订阅专栏

echarts.js文件下载地址:ehcarts – geren博客网站 (wordpress.com)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <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"));
    //指定图表的配置项和数据
    var option = {
        color: ["red","green","blue","grey"],   //使用自己预定义的颜色
        legend: {
            type: 'scroll',  //设置为滚动图例,type属性默认值为'plain'(普通图例,不滚动)
            orient: 'horizontal',  //'vertical'
            x: 'right',  //可选为:'center'、'right'、'left'、{number}
            y: 'top',  //可选为:'center'、'top'、'bottom'、{number}
            backgroundColor: '#eee',
            borderColor: 'rgba(178,34,34,0.8)',
            borderWith: 4,
            padding: 10,
            itemGap: 20, textStyle: { color: 'red' },
        },
        xAxis: {
            data: ['周一','周二','周三','周四','周五','周六','周日']
        },
        yAxis: [   //配置x轴坐标系
            {   //设置第1条y轴
                type: 'value',
                axisLabel: { formatter: '{value} ml' }
            },
            {   //设置第2条y轴
                type: 'value',
                axisLabel: { formatter: '{value}  °C '},
                splitLine: { show: false }
            }
        ],
        series: [   //配置数据系列
            {    //设置数据系列1
                name: '某一年的蒸发量', type: 'bar',
                data: [2.0,4.9,7.0,23.2,25.6,76.7,135.6]
            },
            {   //设置数据系列2
                name: '某一年的降水量', smooth: true,
                type: 'line', yAxisIndex: 1, data: [11,11,15,13,12,13,10]
            },
            {   //设置数据系列3
                name: '某一年的最高气温', type: 'bar',
                data: [2.6,5.9,9.0,26.4,28.7,70.7,175.6]
            },
            {   //设置数据系列4
                name: '某一年的最低气温', smooth: true,
                type: 'line', yAxisIndex: 1, data: [-2,1,2,5,3,2,0]
            }
        ],
};
    myChart.setOption(option);
</script>
</body>
</html>