EChart 之 dataset 用例

官方实例地址

建议 大家以后 要画图 ,能用 dataset 尽量用 dataset 方便便捷

柱状图

option = {
    legend: {},
    tooltip: {},
    dataset: {
        dimensions: ['name','合计'],
        source: [
            ['恶性肿瘤', '脑血管疾病', '心脏病', '呼吸系统疾病', '损伤中毒'],
            [ 41.1, 30.4, 65.1, 53.3, 53.3],

        ]
    },
    xAxis: [
        {type: 'value'},

    ],
    yAxis: [
        {type: 'category'},

    ],
    grid: [
        {bottom: '55%'},
        {top: '55%'}
    ],
    series: [
        
        {type: 'bar', seriesLayoutBy: 'row'},
    

    ]
};

折线图

option = {
    legend: {},
    tooltip: {},
    dataset: {
        dimensions: ['name', '合计', '男', '女'],
        source: [
            ['18-29', '30-39', '40-49', '50-59', '60-69', '70-79', '≥80'],
            [41.1, 30.4, 65.1, 53.3, 53.3, 23, 56],
            [141.1, 40.4, 555.1, 73.3, 23.3, 345, 34],
            [241.1, 20.4, 25.1, 53.3, 513.3, 45, 65],

        ]
    },
    xAxis: [{
        type: 'category',
    },

    ],
    yAxis: [{
        type: 'value'
    },

    ],
    grid: [{
        bottom: '55%'
    },
    {
        top: '55%'
    }],
    series: [
    // These series are in the first grid.
    {
        type: 'line',
        seriesLayoutBy: 'row'
    },
    {
        type: 'line',
        seriesLayoutBy: 'row'
    },
    {
        type: 'line',
        seriesLayoutBy: 'row'
    },
    ]
};

堆叠图

option = {

    legend: {
        data: [, '睡眠不足', '正常', '睡眠过多']
    },
        dataset: {
             dimensions: [, '睡眠不足', '正常', '睡眠过多'],
            source: [["睡眠不足",12,13,14],["正常",24,8,13],["睡眠过多",1,33,12]]
        },
    xAxis: {
        type: 'value'
    },
    yAxis: {
        type: 'category',
       
    },
    series: [
  
            {type: 'bar',"stack": "COLUMN_NAME",},
          {type: 'bar',"stack": "COLUMN_NAME",},
         {type: 'bar',"stack": "COLUMN_NAME",},
    ]
};

多图,圆柱

option = {
    legend: {},
    tooltip: {},
    dataset: {
        dimensions: [, '合计', '男', '女性'],
        source: [
                        ["病1", 12, 2, 14],
                        ["病2", 123, 42, 165],
                        ["病3", 34, 234, 268],
                        ["病4", 31, "5", 31],
                        ["病5", 18, 64, 82]
                    ],
    },
    xAxis: [
        {type: 'value', gridIndex: 0},
        {type: 'value', gridIndex: 1},
        {type: 'value', gridIndex: 2}
    ],
    yAxis: [
        {type: 'category', gridIndex: 0},
        {type: 'category', gridIndex: 1},
        {type: 'category', gridIndex: 2}
    ],
    grid: [
        {bottom: '66%'},
        {top: '70%'},
        {top: '66%',bottom: '66%'}
    ],
    series: [
        // These series are in the first grid.
        {type: 'bar', xAxisIndex: 0, yAxisIndex: 0},

        // These series are in the second grid.
        {type: 'bar', xAxisIndex: 1, yAxisIndex: 1},
        {type: 'bar', xAxisIndex: 2, yAxisIndex: 2},

    ]
};

运行

var div = document.createElement("div");
div.setAttribute("style", "width: 300px;height:200px;");
document.body.appendChild(div)
var myChart = echarts.init(div);
myChart.setOption(option);//上方的option 
myChart.getDataURL({pixelRatio: 2});//获取 图表的  base64图片 . pixelRatio 像素密度 为了解决生成图片模糊问题