echart(2)——柱状图

案例

pictorialBar 象形柱状图

修改并注释的代码

源码地址：https://www.makeapie.com/editor.html?c=xMQLI9VAFHa

option = {
    backgroundColor: '#031245',
    textStyle: {
        color: '#c0c3cd',
        fontSize: 14,
    },
    toolbox: {
        //工具箱
        show: true,
        feature: {
            saveAsImage: {
                //保存图片
                backgroundColor: '#031245',
            },
            dataView: {
                //数据视图
                show: true,
            },
            restore: {
                //重置
                show: true,
            },
            dataZoom: {
                //数据缩放视图
                show: true,
            },
            magicType: {
                //动态类型切换
                //柱状图与折线图
                type: ['bar', 'line'],
            },
        },
        iconStyle: {
            //工具箱图标颜色
            borderColor: '#c0c3cd',
        },
    },
    legend: {
        //无效？name找不到对应的项就不会显示
        data:['科目'],
        top: 10,
        itemWidth: 8,
        itemHeight: 8,
        icon: 'circle',
        left: 'center',
        padding: 0,
        textStyle: {
            color: '#c0c3cd',
            fontSize: 14,
            padding: [2, 0, 0, 0],
        },
    },
    color: [
        //没用上
        '#63caff',
        '#49beff',
        '#03387a',
        '#03387a',
        '#03387a',
        '#6c93ee',
        '#a9abff',
        '#f7a23f',
        '#27bae7',
        '#ff6d9d',
        '#cb79ff',
        '#f95b5a',
        '#ccaf27',
        '#38b99c',
        '#93d0ff',
        '#bd74e0',
        '#fd77da',
        '#dea700',
    ],
    grid: {
        //防止标签溢出
        containLabel: true,
        left: 20,
        right: 20,
        bottom: 10,
        top: 40,
    },
    xAxis: {
        //name:'科目',
        nameTextStyle: {
            //坐标轴名称的文字样式
            color: '#c0c3cd',
            padding: [0, 0, -10, 0],
            fontSize: 14,
        },
        axisLabel: {
            //坐标轴上项目的设置
            color: '#c0c3cd',
            fontSize: 14,
            interval: 1,
        },
        axisTick: {
            //坐标轴刻度
            lineStyle: {
                color: '#384267',
                width: 1,
            },
            show: true,
        },
        splitLine: {
            //坐标轴刻度分割线
            show: false,
        },
        axisLine: {
            //坐标轴线
            lineStyle: {
                color: '#384267',
                width: 1,
                type: 'dashed',//solid可设置为实线
            },
            show: true,
        },
        data: ['语文', '数学', '英语', '化学', '物理', '政治', '生物', '地理', '历史'],
        type: 'category',//这里还可以写时间，会自动分刻度
    },
    yAxis: {
        nameTextStyle: {
            color: '#c0c3cd',
            padding: [0, 0, -10, 0],
            fontSize: 14,
        },
        axisLabel: {
            color: '#c0c3cd',
            fontSize: 14,
            formatter: '{value} %',
        },
        axisTick: {
            lineStyle: {
                color: '#384267',
                width: 1,
            },
            show: true,
        },
        splitLine: {
            show: true,
            lineStyle: {
                color: '#384267',
                type: 'dashed',
            },
        },
        axisLine: {
            lineStyle: {
                color: '#384267',
                width: 1,
                type: 'dashed',
            },
            show: true,
        },
        name: '',
    },
    series: [
        //总共有6个系列
        //三个构成一个整体，后面的浅色是一个，前面的深色是一个
        //每个整体包含三个内容，上菱形、柱状、下菱形
        {
            name: '科目',
            data: [95, 85, 100, 87, 94, 98, 100, 96, 97],
            type: 'bar', //形状：柱状
            barMaxWidth: 'auto',
            barWidth: 30,
            itemStyle: {
                color: {
                    //渐变色
                    x: 0,
                    y: 0,//y轴上方
                    x2: 0,
                    y2: 1,
                    //y轴下方
                    type: 'linear',//线性渐变，radial径向渐变
                    global: false,
                    colorStops: [
                        {
                            offset: 0,
                            color: '#0b9eff',
                        },
                        {
                            offset: 1,
                            color: '#63caff',
                        },
                    ],
                },
            },
            label: {
                //显示这个系列的文字内容
                show: true,
                position: 'top',
                distance: 10,
                color: '#fff',
            },
        },
        {
            data: [1, 1, 1, 1, 1, 1, 1, 1, 1],
            type: 'pictorialBar',//异型柱状图
            barMaxWidth: '20',
            //这里可能会导致画布小的时候菱形位移
            symbol: 'diamond',//菱形，钻石形
            symbolOffset: [0, '50%'],//这个形状的偏移，左右和下上
            symbolSize: [30, 15],
        },
        {
            data: [95, 85, 100, 87, 94, 98, 100, 96, 97],
            type: 'pictorialBar',
            barMaxWidth: '20',
            symbolPosition: 'end',
            symbol: 'diamond',
            symbolOffset: [0, '-50%'],
            symbolSize: [30, 12],
            zlevel: 2,
            //z-index使其居上图层显示
        },
        {
            data: [100, 100, 100, 100, 100, 100, 100, 100, 100],
            type: 'bar',
            barMaxWidth: 'auto',
            barWidth: 30,
            barGap: '-100%',
            //使两个柱状显示在同一个垂直位置
            //使6个系列全部在一个垂直位置显示
            zlevel: -1,
        },
        {
            data: [1, 1, 1, 1, 1, 1, 1, 1, 1],
            type: 'pictorialBar',
            barMaxWidth: '20',
            symbol: 'diamond',
            symbolOffset: [0, '50%'],
            symbolSize: [30, 15],
            zlevel: -2,
        },
        {
            data: [100, 100, 100, 100, 100, 100, 100, 100, 100],
            type: 'pictorialBar',
            barMaxWidth: '20',
            symbolPosition: 'end',
            symbol: 'diamond',
            symbolOffset: [0, '-50%'],
            symbolSize: [30, 12],
            zlevel: -1,
        },
    ],
    tooltip: {
        trigger: 'axis',
        show: true,
        formatter: function (params) {
            //自定义悬浮窗内容
            //console.log(params);
            var res =  params[0].axisValue + '<br>';
            res += params[0].marker +  params[0].data;
            //这里可能因为线性渐变颜色，无法读取
            return res;
        },
    },
};

此柱状图存在空间不足菱形偏移问题。好像是最大宽度设定导致的。

toolbox

ECharts学习（3）–toolbox（工具栏）

toolbox：这是ECharts中的工具栏。内置有导出图片、数据视图、动态类型切换、数据区域缩放、重置五个工具。

属性	类型	说明
toolbox.show	boolean	默认值为true，是否显示工具栏组件
toolbox.orient	stirng	默认值为horizontal，工具栏 icon 的布局朝向。可选项为“horizontal”和“vertical”
toolbox.itemSize	number	默认值为15，工具栏 icon 的大小。
toolbox.itemGap	number	默认值为10，工具栏 icon 每项之间的间隔。横向布局时为水平间隔，纵向布局时为纵向间隔。
toolbox.showTitle	boolean	默认值为true，是否在鼠标 hover 的时候显示每个工具 icon 的标题。
toolbox.feature	Object	各工具配置项。除了各个内置的工具按钮外，还可以自定义工具按钮。注意，自定义的工具名字，只能以 my 开头。

横向柱状图

将xAxis与yAxis互换即可。

堆积图

series下设置

stack:'1',//根据此参数来堆叠数据

想要堆叠在一起的系列就写相同的这个值。如果是stack:'总量'那另外一个也写总量。