标签：xAxis 详细 color type 配置 设置 折线图 data 线条

　　折线用于反应事物发展趋势和分布状况

var option = {
            title: { //设置标题
                text: '主标题',
                subtext: '副标题',
                textStyle: {//设置主标题样式
                    color: '#fff',//设置字体颜色
                    fontStyle: 'normal',//设置文字字体'normal'、'italic'、'oblique'
                    fontWeight: 'bolder',//设置字体粗细'normal'、'bold'、'bolder'、'lighter'
                },
                itemGap:10,//设置主副标题间距
                borderWidth:2,//设置边框线框
                borderColor:'#ccc',//设置边的颜色
                borderRadius: 5, // 标题边框圆角
                backgroundColor:'yellow',//设置背景颜色
            },
            legend: {//设置图例
                type:'',//scroll设置为滚动图例，默认为plain
                orient: 'horizontal',//图例对齐方式为水平对齐，垂直对其：'vertical'
                data: []
            },
            tooltip: {//提示框组件
                trigger: '',//设置提示框触发方式。'item',数据项图形触发，主要在散点图，饼图等无类目轴的图表中使用。'axis',坐标轴触发，主要在柱状图，折线图等会使用类目轴的图表中使用。
                formatter: "{a}<br/>{b}:{c}"//提示框显示内容
            },
            toolbox: {//工具箱
                feature: {
                    saveAsImage: {},//保存图片
                    restore: {},//配置还原
                    dataView: {},//数据视图
                    dataZoom: {},//区域缩放
                    magicType: {//数据类型切换
                        type: ['line', 'bar', 'stack']
                    }

                }
            },
            xAxis: {
                type: 'category',
                data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat','Sun'],
                boundaryGap:{show:'ture'},//是否紧挨边缘
            },
            yAxis: {
                type: 'value',
                scale:'ture'//缩放：脱离0值比例，以最小的数值作为最低值
            },
            series: [
                {
                    //step:'end',//设置折线的样式，绘制阶梯图
                    data: [70, 250, 120, 218, 135, 147, 260],
                    type: 'line',
                    smooth: 'ture',   //线条设为平滑的
                    label:{show:'true'},//显示线条对应点的数值
                    stack:'总量',//用于设置堆积效果，当有两个折线图时两个图形都设置stack并且数值一样
                    lineStyle: {      //设置线条样式
                        color: 'blue',//线条颜色
                        width:2,      //线条宽度
                    },
                    areaStyle:{  //填充线条下方区域的颜色
                        color:'yellow'
                    },
                    markLine: {       //设置标记线
                        data: [
                            {
                                type: 'average', name: '平均值',
                                itemStyle: {       //设置标记线样式
                                    normal: { borderType: 'dotted', color: 'darkred' }//
                                }
                            }
                        ]
                    },
                    markPoint: {
                        data: [
                            { type: 'max', name: '最大值' }, { type: 'min', name: '最小值' }
                        ]
                    },
                    markArea: {    //标记区域形成柱状区间
                        data: [
                            [
                                {    //开始位置
                                    xAxis: 'Mon'
                                },
                                {    //结束位置
                                    xAxis: 'Tue',
                                }
                            ],
                            [
                                {   //开始位置
                                    xAxis: 'Fri',
                                }, 
                                {   //结束位置
                                    xAxis: 'Sun'
                                }
                            ]
                        ]
                    },

                }
            ]
        };

标签：xAxis,详细,color,type,配置,设置,折线图,data,线条
来源： https://www.cnblogs.com/lixianhui/p/16284336.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。