echarts折线图——示例

option = {
    backgroundColor: '#fff',    // 背景颜色
    title: {  //标题
        text: '折线图示例',  //主
        subtext: '', // 副  
        textStyle: {  //标题样式
            color: '#00F6FF',
            fontSize: 24
        },
        subtextStyle:{  //副标题样式
            color: '#00F6FF',
            fontSize: 24
        },
    },
    tooltip: {   //提示框组件。
        trigger: 'axis',    //触发类型。
        //'item'
        //数据项图形触发，主要在散点图，饼图等无类目轴的图表中使用。
        //'axis'
        //坐标轴触发，主要在柱状图，折线图等会使用类目轴的图表中使用。
        //在 ECharts 2.x 中只支持类目轴上使用 axis trigger，在 ECharts 3 中支持在直角坐标系和极坐标系上的所有类型的轴。并且可以通过 axisPointer.axis 指定坐标轴。
        //'none'
        //什么都不触发。
        
        axisPointer: {
            type: 'cross',
        // 指示器类型。
        // 'line' 直线指示器
        // 'shadow' 阴影指示器
        // 'none' 无指示器
        // 'cross' 十字准星指示器。其实是种简写，表示启用两个正交的轴的 axisPointer。
            label: {
                backgroundColor: '#6a7985'
            },
              lineStyle: {
              color: '#C02235',
              width: 1,
              type: 'dashed'
            }
        }
    },
    legend: {     //一个漂浮的数据展示 可以定义样式
        data: ['样式1', '样式2', '样式3', '样式4', '样式5'],
        right:100,
        
    },
    toolbox: {     //提示框组件。
        feature: {
            saveAsImage: {}
        }
    },
    grid: {         // 间距是 根据x、y轴计算的；假如都是0，x、y轴的label汉字就隐藏掉了。
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
    },
    xAxis: [
        {
            type: 'category',    //坐标轴类型。
//可选：

//'value' 数值轴，适用于连续数据。

//'category' 类目轴，适用于离散的类目数据。为该类型时类目数据可自动从 series.data 或 dataset.source 中取，或者可通过 xAxis.data 设置类目数据。

//'time' 时间轴，适用于连续的时序数据，与数值轴相比时间轴带有时间的格式化，在刻度计算上也有所不同，例如会根据跨度的范围来决定使用月，星期，日还是小时范围的刻度。

//'log' 对数轴。适用于对数数据。
            boundaryGap: false, //两侧距离两边的距离
            data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']   
        }
    ],
    yAxis: [
        {
            type: 'value'   //同上
        }
    ],
    series: [ 
        {
            data: [820, 932, 901, 934, 1290, 1330, 1320],
            type: 'line',
            name: '样式1',
            itemStyle: {
              color: '#C02235'
            },
            lineStyle: {
              width: 1,
            },
            showSymbol: false,
            // 区域填充样式
            areaStyle: {
              color: '#F4D7DB', //  区域颜色
              opacity: 1,   //  透明度
              // 渐变色
              // {
                // type: 'linear',
                // x: 0,
                // y: 0,
                // x2: 0,
                // y2: 1,
                // colorStops: [{
                //   offset: 0, color: 'rgba(58,132,255, 0.5)' // 0% 处的颜色
                // }, {
                //   offset: 1, color: 'rgba(58,132,255, 0)' // 100% 处的颜色
                // }],
                // global: false // 缺省为 false
              // },
            },
            
        //     emphasis: {
        //         focus: 'series'   //折线图的高亮状态。
        //         //在高亮图形时，是否淡出其它数据的图形已达到聚焦的效果。支持如下配置：
        //         //'none' 不淡出其它图形，默认使用该配置。
        //         //'self' 只聚焦（不淡出）当前高亮的数据的图形。
        //         //'series' 聚焦当前高亮的数据所在的系列的所有图形。
        //     },
          },
    ]
};

样式预览 ECharts官网