echarts简单的单折线图样式简记

折线图

**var myChart

  var option = {
                tooltip: {
                    trigger: 'axis',   //鼠标移动到焦点时显示对应数据                                  
                },
                //设置canvas内部表格的内距
                grid: {
                    x: 70,
                    y: 40,
                    x2: 20,
                    y2: 50,
                },
                xAxis: {
                    type: 'category',
                    data: [10,22,33],    //x轴显示数据
                   axisLabel: {    //坐标轴刻度标签的相关配置
                       show: true,
                       textStyle: {        
                           color: '#D9EFFF'
                       }
                   },
                   axisTick: {   //不展示坐标刻度
                  show: false
                     }
                   axisLine: {     //坐标轴轴线相关配置
                       lineStyle: {
                           color: '#266090',//轴线颜色
                       }
                   },
                   splitLine: {    //分隔线
                       show: false, //网格线显隐
                       lineStyle: {
                           color: '#266090',//网格线颜色
                           width: 1,
                           // type: 'dashed'// 网格线样式虚线
                       },
                   },
                },
                yAxis: {
                    type: 'value',
                    axisLabel: {      
                        formatter: '{value}(%) ' ，  //给每个y轴都加上百分比的单位
                         textStyle: {                           //y轴上文字的样式：
                            color: '#D9EFFF'
                        }
                    },
                    axisLine: {
                        lineStyle: {
                            color: '#266090',//轴线颜色
                        },
                     
                    },
                    splitLine: {
                        show: true, //网格线显隐
                        lineStyle: {
                            color: '#266090',//网格线颜色
                            width: 1,
                            // type: 'dashed'//虚线
                        },
                    },
                },
                series: [{     //填充的样式
                    data: [33.33,44.44,55.55],  //y轴数据填充
                    type: 'line',
                    smooth: true   //折线是否采用光滑形式
                }]，
                color:['#fff']   //折线条颜色
            };
            myChart = echarts.init(document.getElementById('line-data'));
            myChart.setOption(option);**

相应样式

    **1.鼠标移动到坐标轴时 触发显示相应数据内容**
     tooltip: {
                    trigger: 'axis',   //适用柱状图 折线图
                    trigger:'item', //适用饼图  散点图                                  
                },

     **2.  设置canvas内部表格的内距  设置表格大小**
              grid: {
                    x: 70,   //图表左边 距离左边的位移
                    y: 40,  //图表上边 距离上边的距离
                    x2: 20,  //图表右边 距离右边的距离
                    y2: 50,  //图表下边 距离下边的距离
                },
              通过x、y、x2、y2可以自定义的设置折线图的大小

3.xy轴文字样式、和轴线样式

               3.xy轴文字样式、轴线样式、网格样式
               axisLabel: {      // 文字样式
                        formatter: '{value}(%) ' ，  //给每个y轴都加上百分比的单位
                        color：'#fff',  //也可通过在textStyle里面的color设置
                    },
                    axisLine: {   //轴线样式
                        lineStyle: {             
                            color: '#266090',//轴线颜色 (必须在linestyle里面设置)
                        },
                    },
                    splitLine: {
                        show: true, //网格线显隐
                        lineStyle: {
                            color: '#266090',//网格线颜色
                            width: 1,
                            // type: 'dashed' //虚线    solid实线  dotted 点虚线
                        },
                    },

根据页面大小重布局图表

  //重布局大小
            setTimeout(function () {
                window.onresize = function () {
                    myChart.resize();
                }
            }, 200)

轮播展示高亮数据

 //轮播展示
            var currentIndex = -1;
            if (option.series.length !== 0) {
                timer = setInterval(function () {

                    var dataLen = option.series[0].data.length;
                    // 取消之前高亮的图形
                    myChart.dispatchAction({
                        type: 'downplay',
                        seriesIndex: 0, //表示series中的第几个data数据循环展示
                        dataIndex: currentIndex
                    });
                    currentIndex = (currentIndex + 1) % dataLen; //+1表示每次跳转一个
                    // 高亮当前图形
                    myChart.dispatchAction({
                        type: 'highlight',
                        seriesIndex: 0,
                        dataIndex: currentIndex
                    });
                    // 显示 tooltip
                    myChart.dispatchAction({
                        type: 'showTip',
                        seriesIndex: 0,
                        dataIndex: currentIndex
                    })
                }, 2000);
            }