Echarts曲线图HTML

最新推荐文章于 2024-04-28 13:46:58 发布

王,

最新推荐文章于 2024-04-28 13:46:58 发布

阅读量97

点赞数

文章标签：前端 echarts

本文链接：https://blog.csdn.net/weixin_61401688/article/details/134182465

版权

样式：

代码：

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>曲线形式的统计图示例</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.2.1/echarts.min.js"></script>
</head>

<body>
    <div id="curve" style="width: 100%;height:400px;"></div>
</body>
<script type="text/javascript">
    var myChart = echarts.init(document.getElementById('curve'));
    var option = {
        title: {
            text: '曲线形式的统计图',
            textAlign: "left"  //主副标题文本水平对齐方式，可选值为’left’, ‘center’, ‘right’。
        },
        tooltip: {
            trigger: 'axis', //提示框触发类型'item'（数据项触发）'axis'（坐标轴触发）'none'（不触发)

        },
        legend: {
            data: ['销量'],
        },

        /*下载功能*/
        toolbox: {
            feature: {
                saveAsImage: {}
            },
            padding: [0, 15, 0, 0]
        },
        grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
        },
        /*数据点颜色 and 面积颜色*/
        color: ['DeepSkyBlue', 'HotPink', 'LawnGreen', 'Gold',], //color[0]对应series[0] 深蓝色
        /*X轴*/
        xAxis: {
            type: 'category',
            /*x轴数据从原点开始*/
            boundaryGap: false, //默认true
            data: ['13:00', '13:05', '13:10', '13:15', '13:20', '13:25', '13:30', '13:35', '13:40', '13:45', '13:50', '13:55'],
            axisLabel: {
                show: true,  //这里的show用于设置是否显示y轴下的字体 默认为true
                textStyle: {   //textStyle里面写y轴下的字体的样式
                    color: '#333',
                    fontSize: 13
                }
            },
        },
        /*Y轴*/
        yAxis: {
            /*y轴是否从最小值开始*/
            scale: false, // false从0开始
            /*是否显示y轴*/
            show: true, //true显示 默认true
            /*坐标轴类型*/
            type: 'value', //’value’（数值轴）、‘category’（类目轴）、‘time’（时间轴）、‘log’（对数轴）
            /*轴线属性*/
            axisLine: {
                /*y轴竖线*/
                show: true, //true显示 默认false
                lineStyle: {
                    color: 'rgb(110, 112, 121)', //改变y轴颜色
                    width: 2, // y轴粗细
                    //Y轴上下宽度像素不一致，暂不知道解决方法
                },
            },

        },

        /*数据系列*/
        series: [
            {
                name: '设备数：',
                type: 'line', // 'line'（折线图）、'bar'（柱状图）、'pie'（饼图）
                smooth: true, // true开启曲线
                showSymbol: false, // false关闭数据点
                endLabel: {
                    show: false, // true只显示折线图最后一个数据
                },
                data: [120, 110, 125, 145, 122, 165, 122, 220, 182, 191, 134, 150],
                /*折线下方面积渐变*/
                areaStyle: {
                    opacity: 1.2,
                    color: new echarts.graphic.LinearGradient( //渐变色
                        0, 0, 0, 1,
                        [   //0->1渐变
                            {
                                offset: 0,
                                color: 'rgb(193, 228, 249)'
                            },
                            {
                                offset: 1,
                                color: 'rgb(255, 255, 255)'
                            }
                        ])
                },
                lineStyle: { // 折线颜色
                    normal: {
                        color: "rgb(4, 148, 250)", // 折线颜色
                        width: 2 // 折线宽度
                    }
                },
            },
            //其他数据图
            {}
        ]
    };
    /*数据渲染*/
    console.log(option.series[0].data);
    /*方法自调用*/
    myChart.setOption(option);
</script>

</html>