Echarts 折线图

绘制代码如下:
Html

<div id="echarts"></div>

Css

<style>
    #echarts{
    height:417px;
    width: 1003px;
    background-color: #FFF !important;
    box-shadow: 1px 1px 3px #CCCCCC;
    margin-top: 10px;
    border-radius: 2px;
    padding: 37px 0px 20px;
    margin: 0 auto;
    }
</style>

JavsScript

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

        // 指定图表的配置项和数据
    option = {
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'none',
                show: false
            },
        },
        toolbox: {
            show: false,
        },
        legend: {
            selectedMode: 'multiple',
            formatter: '{name}',
            data:['邮件营销','联盟广告','直接访问','搜索引擎']
        },
        grid: {
            top: '10%',
            left: '5%',
            right: '5%',
            bottom: '3%',
            containLabel: true
        },
        xAxis: {
            type: 'category',
            boundaryGap: false,
            axisLine: {
                lineStyle: {
                    color: '#e6e6e5',
                    width: 1,
                },
            },
            axisTick: {
                show: true,
            },
            axisLabel:{
                textStyle: {
                    color: '#6b6b6b'
                }
            },
            splitLine:{
                show: false,
                lineStyle: {
                    // 网格线颜色
                    color: ['#eef6ff']
                }
            },
            data: ['周一','周二','周三','周四','周五','周六','周日']
        },
        yAxis: [{
            type: 'value',
            name: '万元/月',
            color: '#333',
            nameTextStyle: {
                color: ['#6b6b6b']
            },
            position: 'left',
            axisLabel: {
                formatter: '{value}'
            },
            axisLine: {
                lineStyle: {
                    color: '#e6e6e5',
                    width: 1,
                }
            },
            axisLabel:{
                textStyle: {
                    color: '#6b6b6b'
                },
            },
            splitLine:{
                show: false,
                lineStyle: {
                    // 网格线颜色
                    color: ['#eef6ff']
                }
            },
        }],
        series : [
            {
                name:'邮件营销',
                type:'line',

                smooth: true,
                itemStyle: {
                    normal: {
                        color: '#c21818',
                    },
                },
                symbol: 'image://img/favicon.png',
                symbolSize: 10,
                data:[100, 120, 130, 149, 166, 155, 188]
            },
            {
                name:'联盟广告',
                type:'line',

                smooth: true,
                itemStyle: {
                    normal: {
                        color: '#4c99fe',
                    },
                },
                symbol: 'image://img/favicon.png',
                symbolSize: 10,
                data:[
                    120, 132, 301, 134, 
                    {value:90, symbol:'droplet',symbolSize:10},
                    230, 210
                ]
            },
            {
                name:'直接访问',
                type:'line',

                smooth: true,
                itemStyle: {
                    normal: {
                        color: '#efb400',
                    },
                },
                symbol: 'image://img/favicon.png',
                symbolSize: 10,
                   data:[
                    120, 82,
                    {
                        value:201,
                        symbol: 'star',  // 数据级个性化拐点图形
                        symbolSize : 15,
                        itemStyle : { normal: {label : {
                            show: true,
                            textStyle : {
                                fontSize : '20',
                                fontFamily : '微软雅黑',
                                fontWeight : 'bold'
                            }
                        }}}
                    },
                    {
                        value:134,
                        symbol: 'none'
                    },
                    190, 
                    {
                        value : 230,
                        symbol: 'emptypin',
                        symbolSize: 8
                    },
                    110
                ]
            },
            {
                name:'搜索引擎',
                type:'line',

                itemStyle: {
                    normal: {
                        color: '#5db535',
                    },
                },
                smooth: true,
                symbol: 'image://img/favicon.png',
                symbolSize: 10,
                data:[
                    320, 332, 500, 334,
                    {
                        value: 390,
                        symbol: 'star6',
                        symbolSize : 20,
                        symbolRotate : 10,
                        itemStyle: {        // 数据级个性化折线样式
                            normal: {
                                color: 'yellowgreen'
                            },
                            emphasis: {
                                color: 'orange',
                                label : {
                                    show: true,
                                    position: 'inside',
                                    textStyle : {
                                        fontSize : '8'
                                    }
                                }
                            }
                        }
                    },
                    330, 320
                ]
            }
        ]
    };


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

预览地址:Echarts折线图

仅有 1 条评论
  1. Ferre

    挺不错的

    Ferre December 27th, 2017 at 06:00 pm回复
发表新评论