ECharts-折线图使用

最新推荐文章于 2023-06-07 17:06:08 发布

CH_咯

最新推荐文章于 2023-06-07 17:06:08 发布

阅读量647

点赞数

分类专栏： JavaScript 文章标签： ECharts echarts折线图图表折线图

本文链接：https://blog.csdn.net/weixin_43774460/article/details/103288134

版权

JavaScript 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

ECharts可视化图表-折线图总结

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="https://cdn.bootcss.com/echarts/4.2.1-rc1/echarts.min.js"></script> <!-- 通过cdn引入 -->
</head>

<body>
    <div id="main" style="width: 800px;height:400px;margin:20px auto"></div>
</body>

</html>

<script>
    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById('main'));

    // 饼状图-指定图表的配置项和数据
    var option = {
        title: {
            text: 'Fanso Fen',
            top: '5%',
            left: 'center',
            textStyle: {
                color: '#FFF',
                align: 'center',
            }
        },
        tooltip: {
            show: true,                     // 默认                      
            trigger: 'axis',                // 触发类型 item>饼图,散点图等,axis>柱状图,折线图等
            axisPointer: {                  // 坐标轴指示器，坐标轴触发有效
                type: 'shadow'              // 默认为直线，可选为：'line' | 'shadow'
            }
        },
        legend: {
            orient: 'horizontal',           // 图例列表的布局朝向 horizontal(默认)
            left: 'left',
            textStyle: {                    // 图例文本样式
                color: '#333',
                fontStyle: 12
            },
            itemGap: 10,                    // 图例每项的间隔
            selectedMode: true,             // 图例选择的模式 禁用/启用
            icon: "circle",                 // 图例项的 icon                    
            data: [{                        // 图例数据
                    name: 'PV',
                    textStyle: {
                        color: '#000',
                        fontSize: 14
                    },                      // 可以通过图片bse64-转换image://......转换地址
                    icon: 'image://data:image/jpeg;base64,/9j/4AAQSkZJRgABAQEAYABgAAD//gAUU29mdHdhcmU6IFNuaXBhc3Rl/9sAQwADAgIDAgIDAwMDBAMDBAUIBQUEBAUKBwcGCAwKDAwLCgsLDQ4SEA0OEQ4LCxAWEBETFBUVFQwPFxgWFBgSFBUU/9sAQwEDBAQFBAUJBQUJFA0LDRQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQU/8AAEQgAEwAlAwEiAAIRAQMRAf/EAB8AAAEFAQEBAQEBAAAAAAAAAAABAgMEBQYHCAkKC//EALUQAAIBAwMCBAMFBQQEAAABfQECAwAEEQUSITFBBhNRYQcicRQygZGhCCNCscEVUtHwJDNicoIJChYXGBkaJSYnKCkqNDU2Nzg5OkNERUZHSElKU1RVVldYWVpjZGVmZ2hpanN0dXZ3eHl6g4SFhoeIiYqSk5SVlpeYmZqio6Slpqeoqaqys7S1tre4ubrCw8TFxsfIycrS09TV1tfY2drh4uPk5ebn6Onq8fLz9PX29/j5+v/EAB8BAAMBAQEBAQEBAQEAAAAAAAABAgMEBQYHCAkKC//EALURAAIBAgQEAwQHBQQEAAECdwABAgMRBAUhMQYSQVEHYXETIjKBCBRCkaGxwQkjM1LwFWJy0QoWJDThJfEXGBkaJicoKSo1Njc4OTpDREVGR0hJSlNUVVZXWFlaY2RlZmdoaWpzdHV2d3h5eoKDhIWGh4iJipKTlJWWl5iZmqKjpKWmp6ipqrKztLW2t7i5usLDxMXGx8jJytLT1NXW19jZ2uLj5OXm5+jp6vLz9PX29/j5+v/aAAwDAQACEQMRAD8A/T7UdXstNkY3U0UH+07gVh6t4706ysnnhuIrl1xtSNwST0rY1Lw3pmtnzL2yhuPeRAc1i6p8OdHuoClpYwWco+7LCgUj8q1jyLc4K8KsvgMqHx5d2dzANVhjtrW5+4xPP866OLxfpTAD7bBs7DeM1gn4fy301udVmiu4bb/VoVH6+vSty38DaCAH/sm13/3jEM/yq5um17pFOGIXxGtBfRXEYeF96eqsKKW30u1tY9kMKRp/dUYFFY6HXaZcb7lNABU0UVJqxrxqCDjmnocrRRQCHUUUUFH/2Q=='     
                },
                {
                    name: 'UV',
                    textStyle: {
                        color: '#000',
                        fontSize: 14
                    },
                    icon: 'image://data:image/jpeg;base64,/9j/4AAQSkZJRgABAQEAYABgAAD//gAUU29mdHdhcmU6IFNuaXBhc3Rl/9sAQwADAgIDAgIDAwMDBAMDBAUIBQUEBAUKBwcGCAwKDAwLCgsLDQ4SEA0OEQ4LCxAWEBETFBUVFQwPFxgWFBgSFBUU/9sAQwEDBAQFBAUJBQUJFA0LDRQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQU/8AAEQgAGAAnAwEiAAIRAQMRAf/EAB8AAAEFAQEBAQEBAAAAAAAAAAABAgMEBQYHCAkKC//EALUQAAIBAwMCBAMFBQQEAAABfQECAwAEEQUSITFBBhNRYQcicRQygZGhCCNCscEVUtHwJDNicoIJChYXGBkaJSYnKCkqNDU2Nzg5OkNERUZHSElKU1RVVldYWVpjZGVmZ2hpanN0dXZ3eHl6g4SFhoeIiYqSk5SVlpeYmZqio6Slpqeoqaqys7S1tre4ubrCw8TFxsfIycrS09TV1tfY2drh4uPk5ebn6Onq8fLz9PX29/j5+v/EAB8BAAMBAQEBAQEBAQEAAAAAAAABAgMEBQYHCAkKC//EALURAAIBAgQEAwQHBQQEAAECdwABAgMRBAUhMQYSQVEHYXETIjKBCBRCkaGxwQkjM1LwFWJy0QoWJDThJfEXGBkaJicoKSo1Njc4OTpDREVGR0hJSlNUVVZXWFlaY2RlZmdoaWpzdHV2d3h5eoKDhIWGh4iJipKTlJWWl5iZmqKjpKWmp6ipqrKztLW2t7i5usLDxMXGx8jJytLT1NXW19jZ2uLj5OXm5+jp6vLz9PX29/j5+v/aAAwDAQACEQMRAD8A/UuaZkXg/iFzUE+ppbKfMdE9N7baztVXWfM3WixNGP8AlnISAfxArEuf7SF/aNfi1SAD5wrE4/MVEpcpEnY6SLX7SeQxpdW7Sf3VkBNXEnMnt+HFcZqMqvLCNKFt5oJ3EjB6/StCFPEErqXS0VR/Ertn8sUlUvoJPU3Lq/jsQsk80ccXQ7iBzRXn/wAcBe/8IA00Me65WeMfuickE9aK0ND0+T7tU7i1jmPzIG+tFFZzIaGpYQRtuWFQ3ripJYyVypKkdMUUVnBCS1Kd4I5UEcqozyAbwyFl4+lFFFdBof/Z'
                }
            ]
        },
        grid: {
            left: '3%',                     // 组件离容器左侧的距离
            right: '8%',
            bottom: '3%',
            containLabel: true              // 默认false,ture时防止标签溢出(标签长度动态变化时，可能会溢出容器或者覆盖其他组件)  
        },
        xAxis: [{
            show: true,                     
            name: '',                       
            type: 'category',               // 坐标轴类型。   
            axisTick: {
                show: false,                // X轴的标记点
            },
            data: ['2019/11/11', '2019/11/12', '2019/11/13', '2019/11/14', '2019/11/15', '2019/11/16','2019/11/17'], // 坐标轴数据
            boundaryGap : false,
        }],
        yAxis: [
            {
                type: 'value',
                name: '(单位:次)',
                min: 0,
                axisLine: {
                    show: false,
                },
                axisTick: {
                    show: false,
                },
                splitLine: {                // 水平的分割线
                    show: true,
                    lineStyle: {
                        color: '#eee'
                    }
                },
                splitNumber:6               // 坐标轴的分割段数，需要注意的是这个分割段数只是个预估值.在类目轴中无效。
            },                      
            {
                type: 'value',              // 第二个Y轴
                name: '(单位:人)',
                min: 0,
                axisLine: {
                    show: false,
                },
                axisTick: {
                    show: false,
                },
                splitLine: {
                    show: false,
                    lineStyle: {
                        color: '#eee'
                    }
                },
                splitNumber:6

            },
        ],
        series: [{
                name: 'PV',
                type: 'line',
                symbol: 'circle',                   // 折线点类型,可以通过图片bse64-转换image://......地址
                symbolSize: 8,                      // 折线点大小
                itemStyle: {                        // 折线拐点标志的样式。
                    normal: {
                        color: '#fff',              // 折线点图形颜色
                        borderColor:'#b1e4e4',      // 折现点边框    
                    }
                },
                lineStyle: {                        // 线条样式                 
                    normal:{
                        color:'#b1e4e4',
                        width:1
                    }
                 },
                 areaStyle:{                         // 区域填充样式。
                     normal:{
                         color:new echarts.graphic.LinearGradient(0,0,0,1,[   
                        { offset:0,color:'skyblue' },{ offset:1,color:"rgba(255,255,255,0.5)" }])
                     }
                 },
                data: [24610, 24100, 24030, 21030, 21030, 21030, 21030]
            },
            {
                name: 'UV',
                type: 'line',
                yAxisIndex:1,                       //  y轴的index,多轴使用                   
                symbol: 'rect',
                symbolSize: 8,
                itemStyle: {
                    normal: {
                        color: '#fff',                
                        borderColor:'#bfc9b1',       
                    }
                },
                lineStyle: {
                    color: "purple",        
                    width: 1
                },
                data: [160, 221, 221, 221, 221, 250, 200, ]
            },
        ]
    };

    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);

    
</script>

在这里插入图片描述

CH_咯

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
ECharts-折线图使用

ECharts可视化图表-折线图总结<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <...
复制链接

扫一扫