echartsjs折线图(0-1)

在这里插入图片描述

option = {
    backgroundColor: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
            offset: 0,
            color: '#c86589'
        },
        {
            offset: 1,
            color: '#06a7ff'
        }
    ], false),
    title: {
        text: "OCTOBER 2015",
        left: "center",
        bottom: "5%",
        textStyle: {
            color: "#fff",
            fontSize: 16
        }
    },
    grid: {
        top: '20%',
        left: '10%',
        right: '10%',
        bottom: '15%',
        containLabel: true,
    },
    xAxis: {
        type: 'category',
        boundaryGap: false,
        data: ['14', '15', '16', '17', '18', '19', '20', '21', '22', '23'],
        axisLabel: {
            margin: 30,
            color: '#ffffff63'
        },
        axisLine: {
            show: false
        },
        axisTick: {
            show: true,
            length: 0,
            lineStyle: {
                color: "#ffffff1f"
            }
        },
        splitLine: {
            show: true,
            lineStyle: {
                color: '#ffffff1f'
            }
        }
    },
    yAxis: [{
        type: 'value',
        position: 'right',
        axisLabel: {
            margin: 20,
            color: '#ffffff63'
        },

        axisTick: {
            show: true,
            length: 0,
            lineStyle: {
                color: "#ffffff1f",
            }
        },
        splitLine: {
            show: true,
            lineStyle: {
                color: '#ffffff1f'
            }
        },
        axisLine: {
            lineStyle: {
                color: '#ffffff1f',
                width: 1
            }
        }
    }],
    series: [{
        name: '注册总量',
        type: 'line',
        smooth: true, //是否平滑曲线显示
        showAllSymbol: true,
        symbol: 'circle',
        symbolSize: 6,
        lineStyle: {
            normal: {
                color: "#fff", // 线条颜色
            },
        },
        label: {
            show: true,
            position: 'top',
            textStyle: {
                color: '#fff',
            }
        },
        itemStyle: {
            color: "red",
            borderColor: "#fff",
            borderWidth: 3
        },
        tooltip: {
            show: false
        },
        areaStyle: {
            normal: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                        offset: 0,
                        color: '#eb64fb'
                    },
                    {
                        offset: 1,
                        color: '#3fbbff0d'
                    }
                ], false),
            }
        },
        data: [393, 438, 485, 631, 689, 824, 987, 1000, 1100, 1200]
    }]
};
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
对于Echarts区域折线图,你可以使用Echarts库来创建。下面是一个简单的示例代码,展示如何使用Echarts创建区域折线图: ```html <!DOCTYPE html> <html> <head> <title>Echarts区域折线图示例</title> <!-- 引入Echarts库 --> <script src="https://cdn.jsdelivr.net/npm/echarts@5.2.2/dist/echarts.min.js"></script> </head> <body> <!-- 创建一个具有指定大小的容器来放置图表 --> <div id="chart" style="width: 600px; height: 400px;"></div> <script> // 初始化Echarts实例 var chart = echarts.init(document.getElementById('chart')); // 定义数据 var data = [ [10, 20, 30, 40, 50, 60, 70], [15, 25, 35, 45, 55, 65, 75], [5, 15, 25, 35, 45, 55, 65] ]; // 定义图表配置项 var options = { title: { text: '区域折线图示例' }, tooltip: { trigger: 'axis' }, legend: { data: ['系列1', '系列2', '系列3'] }, xAxis: { type: 'category', data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'] }, yAxis: { type: 'value' }, series: [ { name: '系列1', type: 'line', stack: '总量', areaStyle: {}, data: data[0] }, { name: '系列2', type: 'line', stack: '总量', areaStyle: {}, data: data[1] }, { name: '系列3', type: 'line', stack: '总量', areaStyle: {}, data: data[2] } ] }; // 使用配置项显示图表 chart.setOption(options); </script> </body> </html> ``` 以上代码创建了一个简单的区域折线图,其中x轴表示周一到周日,y轴表示数值。有三个系列(系列1,系列2和系列3),每个系列都有一个数据集。图表使用Echarts的`echarts.init`函数初始化,并使用`chart.setOption`方法将配置项应用于图表。 你可以根据自己的需求修改数据和配置项来创建具有不同样式和内容的区域折线图。希望对你有所帮助!如有更多问题,请继续提问。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值