echarts折线图

详细信息

标题

//标题组件，包含主标题和副标题。
let title = {
    id:'',//组件 ID。默认不指定。指定则可用于在 option 或者 API 中引用组件
    show:true,//是否显示标题组件
    text:'',//主标题文本，支持使用 \n 换行。
    link:'',//主标题文本超连接
    target:'',// 指定窗口打开主标题超连接。   'self' 当前窗口打开    'blank' 新窗口打开
    textStyle:{
        color:'#333',//主标题文字的颜色
        fontStyle:'normal',//主标题文字字体的风格   'normal' 'italic' 'oblique'
        fontWeight:'',//主标题文字字体的粗细
        fontFamily:'',//主标题文字的字体系列
        fontSize:18,//主标题文字的字体大小
        lineHeight:18,//行高
        width:'',//文字块的宽度。通常不用指定，不指定则自动是文字的宽度。
        height:'',//文字块的高度。通常不用指定，不指定则自动是文字的高度。
        textBorderColor:'transparent',//文字自己的描边颜色
        textBorderWidth:10,//number 文字自己的描边宽度
        textShadowColor:'transparent',//Color 文字自己的阴影颜色
        textShadowBlur:10,//number 文字自己的阴影长度。
        textShadowOffsetX:10,//number 文字自己的阴影 X 偏移。
        textShadowOffsetY:10,//number 文字自己的阴影 Y 偏移
        rich:{
         // 在 rich 里面，能够自定义富文本样式。利用富文本样式，能够在标签中作出很是丰富的效果。
        }
    },
    subtext:'',//string  副标题文本，支持使用 \n 换行
    sublink:'',//副标题文本超连接
    subtarget:'',//指定窗口打开副标题超连接
    subtextStyle:{},//副标题样式
    textAlign:'auto',//总体（包括 text 和 subtext）的水平对齐 可选值：'auto'、'left'、'right'、'center'
    textVerticalAlign:'',//总体（包括 text 和 subtext）的垂直对齐 可选值：'auto'、'top'、'bottom'、'middle'
    triggerEvent:false,//是否触发事件
    padding:5,//padding: 5  内边距为5    padding: [5, 10]设置上下的内边距为 5，左右的内边距为 10    padding:[5,10,5,10] //上右下左
    itemGap：10,//主副标题之间的间距
    zlevel:0,//zlevel用于 Canvas 分层
    Z:2,//组件的全部图形的z值。控制图形的先后顺序。z值小的图形会被z值大的图形覆盖。z相比zlevel优先级更低，并且不会建立新的 Canvas。
    left:'auto',//title 组件离容器左侧的距离。 left 的值能够是像 20 这样的具体像素值，能够是像 '20%' 这样相对于容器高宽的百分比，也能够是 'left', 'center', 'right'
    top:'auto',
    right:'auto',
    bottom:'auto',
    backgroundColor:'transparent',//标题背景色，默认透明
    borderColor:'#ccc',//标题的边框颜色
    borderWidth:0,//标题的边框线宽
    borderRadius:5,//圆角半径，单位px，支持传入数组分别指定 4 个圆角半径 borderRadius: 5, // 统一设置四个角的圆角大小  borderRadius: [5, 5, 0, 0] //（顺时针左上，右上，右下，左下）
    shadowBlur:10,//图形阴影的模糊大小
    shadowColor:'',//阴影颜色
    shadowOffsetX:0,//阴影水平方向上的偏移距离
    shadowOffsetY:0,//阴影垂直方向上的偏移距离
 }

图例

详细信息

let legend = {
    type:'plain',//'plain'：普通图例。缺省就是普通图例      'scroll'：可滚动翻页的图例。当图例数量较多时能够使用。
    orient:'horizontal',//图例列表的布局朝向   'horizontal'  'vertical'
    align:'auto',//图例标记和文本的对齐  auto left right
    itemGap:10,//图例每项之间的间隔。横向布局时为水平间隔，纵向布局时为纵向间隔。
    itemWidth:25,//图例标记的图形宽度
    itemHeight:14,//图例标记的图形高度
    symbolKeepAspect:true,//是否在缩放时保持该图形的长宽比
    formatter:'Legend {name}',//用来格式化图例文本，支持字符串模板和回调函数两种形式 ||  使用回调函数formatter: function (name) {return 'Legend ' + name;}
    selectedMode:true,//图例选择的模式，控制是否能够经过点击图例改变系列的显示状态。默认开启图例选择，能够设成 false 关闭
    textStyle:{},//图例的公用文本样式
    icon:'',//图例项的 icon。标记类型包括 'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow', 'none'
    data:[],//图例的数据数组
}

直角坐标系内绘图网格

详细信息

let grid = {
    left:'10%',//grid 组件离容器左侧的距离
    top:60,//
    right:'',
    bottom:'',
    ....
}

直角坐标系 grid 中的 x 轴

详细信息

let xAxis = {
    nameTextStyle:{},//坐标轴名称的文字样式
    axisLine:{},//坐标轴轴线相关设置
    axisTick:{},//坐标轴刻度相关设置
    axisLabel:{},//坐标轴刻度标签的相关设置
    splitLine：{},//坐标轴在 grid 区域中的分隔线
}

折线图设置

详细信息

let series = [
    {
        type:'line',
        showSymbol:true,//是否显示 symbol
        symbol:'emptyCircle',//拐点 标记类型包括 'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow', 'none'
        symbolSize：4,//标记的大小，能够设置成诸如 10 这样单一的数字，也能够用数组分开表示宽和高，例如 [20, 10] 表示标记宽为20，高为10;
        hoverAnimation:true,//是否开启 hover 在拐点标志上的提示动画效果
        step:true,//是不是阶梯线图。能够设置为 true 显示成阶梯线图，也支持设置成 'start', 'middle', 'end' 分别配置在当前点，当前点与下个点的中间点，下个点拐弯。
        itemStyle:{},//折线拐点标志的样式
        lineStyle:{ },//线条样式
        areaStyle:{},//区域填充样式
        emphasis:{},//图形的高亮样式
        smooth:false,//若是是 boolean 类型，则表示是否开启平滑处理。若是是 number 类型（取值范围 0 到 1），表示平滑程度，越小表示越接近折线段，反之则反。设为 true 时至关于设为 0.5
        data:[],//系列中的数据内容数组。数组项一般为具体的数据项
        ...
    }
]

使用

<div id="myChart" :style="{width: '600px', height: '360px'}"></div>
<script>
let myChart = this.$echarts.init(document.getElementById('myChart'))
myChart.setOption({
    title: {
        text: '订单来源',
        textStyle:{
            color:'#333333',
            fontWeight:'400',
            fontSize:'18px'
        }
    },
    grid: {
        top: '10%',
        left: '5%',
        bottom: '10%',
        right: '5%'
    },
    xAxis: {
        type: 'category',
        boundaryGap: false,
        data: ['00:00', '02:00', '04:00', '06:00', '08:00', '10:00', '12:00', '14:00', '16:00', '18:00', '20:00',
            '22:00', '24:00'
        ],
        axisLine: {
            lineStyle: {
                color: '#EDEDED'
            }
        },
        axisLabel: {
            color: '#999999',
            fontSize: '14px'
        }
    },
    yAxis: {
        type: 'value',
        axisLine: {
            show: false
        },
        axisLabel: {
            color: '#999999',
            fontSize: '14px'
        },
        splitNumber: 8,
        splitLine: {
            show: true,
            lineStyle: {
                type: 'dashed'
            }
        }
    },
    series: [{
        name: '成交',
        type: 'line',
        smooth: true,
        data: [0, 2, 3, 6, 5, 9, 14, 2, 3, 10, 2, 1, 0],
        symbol: 'none',
        lineStyle:{//线条样式
            color:'#E5BC90'
        }
    }]
});
</script>