ECharts图表常用属性参考 -- 折线图Line&柱状图Bar

option = {
    title: {
        text: '周转率',  //图表标题
        textStyle : {
            color : '#eaba2c',
            fontSize : 24,
            fontWeight : 'normal',
        },
    },
    tooltip: {
        // trigger: 'axis',  //坐标轴触发，主要在柱状图，折线图等会使用类目轴的图表中使用
        type: 'cross',       // 默认为直线指示器，可选为：'line' | 'shadow'阴影指示器 | 'none'无指示器 | 'cross'十字准星指示器
        label: {
            backgroundColor: 'rgba(0, 0, 0, 0.6)'
        }
        /**
         * 模板变量有 {a}, {b}，{c}，{d}，{e}，分别表示系列名，数据名，数据值等。 
         * 在 trigger 为 'axis' 的时候，会有多个系列的数据，此时可以通过 {a0}, {a1}, {a2} 这种后面加索引的方式表示系列的索引。
         * 不同图表类型下的 {a}，{b}，{c}，{d} 含义不一样。 其中变量{a}, {b}, {c}, {d}在不同图表类型下代表数据含义为：
         * 
         * 折线（区域）图、柱状（条形）图、K线图 : {a}（系列名称），{b}（类目值），{c}（数值）, {d}（无）
         * 
         * 散点图（气泡）图 : {a}（系列名称），{b}（数据名称），{c}（数值数组）, {d}（无）
         * 
         * 地图 : {a}（系列名称），{b}（区域名称），{c}（合并数值）, {d}（无）
         * 
         * 饼图、仪表盘、漏斗图: {a}（系列名称），{b}（数据项名称），{c}（数值）, {d}（百分比）
         * 
         */
        formatter: "{b} <br/>{a0} : {c0}万度 <br/>{a1} : {c1}万升 ",
    },
    legend: {  //图例
        data:['周转率'],  //和series.name值一样才会显示
        right: '10%',
        orient: 'vertical',
        left: 'right',  //当组件的 left 值为 'right' 以及纵向布局（orient为'vertical'）的时候为右对齐, 且right值失效
        top: '0%',  //图例距离容器顶部的距离
        textStyle : {  //图例样式
            color : '#000',
            fontSize : 16,
        },
    },
    grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true  //grid 区域是否包含坐标轴的刻度标签
    },
    xAxis: {
        name: '名称',
        type: 'category',
        // boundaryGap: false,  //x轴是否从0刻度开始
        data: ['一季度','二季度','三季度','四季度'],

        axisLine: {  //轴线
            symbol:['none','arrow'],
            symbolSize:[6, 10],
            lineStyle: {  //轴线样式
                type: 'solid',
                color: '#000',
            },
        },
        splitLine: {  //分割线
            lineStyle: {  //分割线样式
                type: 'dotted',
                color: '#000',
            }
        },
        axisLabel : {  //轴线上数据样式
            interval: 0, //坐标轴刻度标签的显示间隔
            // rotate: 40, //x轴数据显示不全，向左侧倾斜显示
            textStyle : {
                color : '#000',
                fontSize : 16,
            },
            // formatter:function(value){ //坐标轴竖排显示
                // return value.split("").join("\n");
            // },
        },
        axisTick:{
            show:false,  //是否显示刻度线
        },
    },
    yAxis: {
        type: 'value',
        // splitNumber: 3,  //坐标轴的分割段数[ default: 5 ]
        minInterval: 5,  //坐标轴最小间隔大小[ default: 0 ]

        axisLine: {  //轴线
            symbol:['none','arrow'],
            symbolSize:[6, 10],
            lineStyle: {  //轴线样式
                type: 'solid',
                color: '#000',
            }
        },
        splitLine: {  //分割线
            lineStyle: {  //分割线样式
                type: 'dotted',
                color: '#000',
            }
        },
        axisLabel : {  //轴线上数据样式
            formatter : '{value} %',  //为y轴数值添加百分号%
            textStyle : {
                color : '#000',
                fontSize : 16,
            },
        },
        axisTick:{
            show:false,  //是否显示刻度线
        },
    },
    series: [
        {
            name:'周转率',
            type:'line',
            //type:'bar',  
            //barWidth: '30%',  //type值为'bar'(柱状图)时使用，表示柱状图宽度
            //stack: '总量',  //堆叠柱状图
            data:[20, 16, 38, 30],
            symbol:'circle',  //折线图折点形状,默认为空心圆emptyCircle
            symbolSize : 6,  //折线图上圆点的大小
            itemStyle : {
                normal : {
                    color : '#d87f20',  //折线图圆点颜色
                    lineStyle : {
                        color : '#d87f20',  //折线图折线颜色
                        width : 2,  //折线图折线粗细
                    },
                    barBorderRadius: [0, 0, 0, 0], //设置圆角角度为0
                    // 柱状图渐变色
                    // 前4个参数用于配置渐变色的起止位置, 这4个参数依次对应右/下/左/上四个方位. 而0 0 0 1则代表渐变色从正上方开始. 第5个参数则是一个数组, 用于配置颜色的渐变过程. 每一项为一个对象, 包含offset和color两个参数. offset的范围是0 ~ 1, 用于表示位置, color表示颜色
                    // color: new echarts.graphic.LinearGradient(
                    //     0, 0, 0, 1,
                    //     [
                    //         {offset: 0, color: '#E90DA8'},
                    //         {offset: 0.5, color: '#F12D60'},
                    //         {offset: 1, color: '#F12D60'}
                    //     ]
                    // ),
                    // opacity: 0.85,
                }
            },
            // label: {  //柱状图上显示数值
            //     normal: {
            //         show: true,
            //         position: 'top',  //图表显示数值位置
            //         distance: 6,  //图表显示数值距离图形元素的距离[default: 5]
            //         textStyle : {
            //             fontSize : 16,  //柱状图上显示数值字体大小
            //         },
            //     }
            // },
        },
    ]
};