EChart 之 dataset 用例

2024-05-03 22:18

文章标签 用例 echart dataset

本文主要是介绍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 像素密度 为了解决生成图片模糊问题