ECharts 蓝色系-荧光图标折线图01案例

2024-06-18 40

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介： ECharts 案例展示了一周内各路线数据的蓝色荧光折线图，揭示流量趋势。预览包括静态图片和动态GIF。使用ECharts 5.2.0配置图表，包含背景、网格、图例及数据。代码示例初始化图表、定义X轴类别和Y轴值，以及系列颜色。完整案例可在链接中下载。案例结合动态效果与个性化设计，增强数据可视化的吸引力。

ECharts 蓝色系-荧光图标折线图01案例

图表意义

本折线图案例展示了一周内不同路线的使用情况或数据统计。通过折线的上升和下降，可以直观地观察到每条路线的流量或数据变化趋势，从而进行分析和决策。

效果预览

效果图展示不同路线的数据统计和个性化图标

代码配置

本案例使用的 ECharts 版本为 5.2.0，这是 ECharts 的一个稳定版本，提供了丰富的图表类型和配置选项。

以下是创建上述折线图的基础代码配置，包括 ECharts 初始化、数据准备和图表配置：

var myChart = echarts.init(document.getElementById('ECharts'));

var option = {
   
   
    backgroundColor: '#0e2147',
    grid: {
   
   
        left: '10%',
        top: '15%',
        bottom: '12%',
        right: '10%',
    },
    legend: {
   
   
        data: ['云篆山水路线', '昕博朗学校路线', '新华小学路线', '云锦五路路线'],
    },
    xAxis: {
   
   
        type: 'category',
        data: ["周一", "周二", "周三", "周四", "周五", "周六", "周日"]
    },
    yAxis: {
   
   
        type: 'value'
    },
    series: [
        {
   
   
            name: '云篆山水路线',
            type: 'line',
            data: [123, 154, 234, 321, 120, 390, 634],
            itemStyle: {
   
   
                normal: {
   
   
                    color: '#00f8ff'
                }
            }
        },
        // 其他路线数据...
    ]
};

myChart.setOption(option);