component-Echarts柱状图堆叠图与折线图的实现

最新推荐文章于 2024-11-15 15:36:05 发布

岂不闻

最新推荐文章于 2024-11-15 15:36:05 发布

阅读量382

点赞数 1

CC 4.0 BY-SA版权

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

本文链接：https://blog.youkuaiyun.com/2301_76671906/article/details/137924176

本文详细介绍了如何使用ECharts库在HTML中创建一个包含堆叠柱状图和折线图的实例，展示了如何配置图表的颜色、数据、轴线和标签等元素。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.效果

2.代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>ECharts 实例</title>
    <!-- 引入 echarts.js -->
    <script src="https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js"></script>
</head>
<body>
<!-- ECharts准备（宽高）的Dom -->
<div id="main" style="width: 1000px;height:400px;"></div>
<script type="text/javascript">
    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById('main'));
    // 指定图表的配置项和数据
   var option = {
    // 柱子颜色，几个柱子可设置几个颜色
        color: ['green', 'red','yellow'], 
        // 提示
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'none',
                // 设置背景颜色为白色半透明