echarts常用知识点集合

基本名词 图标名词

1.设置柱形图的柱子渐变

series: [{
    itemStyle: {
        normal: {
            color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
                offset: 0,
                color: "red" // 0% 处的颜色
            }, {
                offset: 0.6,
                color: "blue" // 60% 处的颜色
            }, {
                offset: 1,
                color: "yellow" // 100% 处的颜色
            }], false)
        }
    }
}]

2.设置柱形图的上方显示数量

series: [{
    itemStyle: {
        normal: {
                    label: {
                        show: true, //开启显示
                        position: 'top', //在上方显示
                        textStyle: { //数值样式
                            color: '#ffcc80',
                            fontSize: 16
                        }
                    }
        }
    }
}]

3.改变x轴或者y轴的字体颜色,以y轴为例

yAxis : [
    {
        type : 'value',
        axisLabel : {
            textStyle: { //改变刻度字体样式
                color: '#fff'
            }
        }
    }
]

4.设置柱子的宽度以及间距

series: [
    {
        name: '直接访问',
        type: 'bar',
        barWidth: '60%',    //设置宽度
    },
],

5.设置标题文字以及标题的样式，位置用x,y

title:{
    text:'在职工人统计',
    y:'15x',
    textStyle:{
        //文字颜色
        color:'#ccc',
        //字体风格,'normal','italic','oblique'
        fontStyle:'normal',
        //字体粗细 'normal','bold','bolder','lighter',100 | 200 | 300 | 400...
        fontWeight:'bold',
        //字体系列
        fontFamily:'sans-serif',
        //字体大小
        fontSize:60,
    }
},

6.设置图例的样式

legend: {
    data: ['入口车辆数', '出口车辆数', ],
        right: 20,    //右距离
        top: 0,    //上距离
        itemGap: 10, // 各个item之间的间隔，单位px，默认为10，
        itemWidth: 30, // 图例图形宽度
        itemHeight: 10, // 图例图形高度
        textStyle: {       //设置字体样式
        color: '#A5C3FF',
            fontWeight: 'normal',
            fontSize: 16
    },
},