G2Plot = require("@antv/g2plot@1.0.1");
G2PlotBar = {
const container = document.createElement('div');
const data = coffee;
const stackedColumnPlot = new G2Plot.StackColumn(container, {
data,
xField: '景区名称',
yField: 'value',
xAxis: false,
yAxis: false,
padding: [20, 20, 100, 50],
stackField: 'type',
interactions: [{ type: 'element-highlight-by-color' }, { type: 'element-link' }],
});
stackedColumnPlot.render();
return container;
}
coffee = [
{ 景区名称: '迪士尼', type: '票价', value: 240 },
{ 景区名称: '迪士尼', type: '星级', value: 36 },
{ 景区名称: '迪士尼', type: '门票销量', value: 105 },
{ 景区名称: '迪士尼', type: '大众点评分数', value: 95 },
{ 景区名称: '横店', type: '票价', value: 320 },
{ 景区名称: '横店', type: '星级', value: 39 },
{ 景区名称: '横店', type: '门票销量', value: 160 },
{ 景区名称: '横店', type: '大众点评分数', value: 80 },
{ 景区名称: '故宫', type: '票价', value: 160 },
{ 景区名称: '故宫', type: '星级', value: 37 },
{ 景区名称: '故宫', type: '门票销量', value: 150 },
{ 景区名称: '故宫', type: '大众点评分数', value: 150 },
{ 景区名称: '八达岭长城', type: '票价', value: 250 },
{ 景区名称: '八达岭长城', type: '星级', value: 59 },
{ 景区名称: '八达岭长城', type: '门票销量', value: 125 },
{ 景区名称: '八达岭长城', type: '大众点评分数', value: 175 },
{ 景区名称: '兵马俑', type: '票价', value: 230 },
{ 景区名称: '兵马俑', type: '星级', value: 37 },
{ 景区名称: '兵马俑', type: '门票销量', value: 140 },
{ 景区名称: '兵马俑', type: '大众点评分数', value: 150 },
{ 景区名称: '台儿庄古城', type: '票价', value: 110 },
{ 景区名称: '台儿庄古城', type: '星级', value: 36 },
{ 景区名称: '台儿庄古城', type: '门票销量', value: 90 },
{ 景区名称: '台儿庄古城', type: '大众点评分数', value: 150 },
{ 景区名称: '成都大熊猫基地',type: '票价', value: 150 },
{ 景区名称: '成都大熊猫基地',type: '星级', value: 37 },
{ 景区名称: '成都大熊猫基地',type: '门票销量', value: 160 },
{ 景区名称: '成都大熊猫基地',type: '大众点评分数', value: 150 },
{ 景区名称: '宏村', type: '票价', value: 220 },
{ 景区名称: '宏村', type: '星级', value: 44 },
{ 景区名称: '宏村', type: '门票销量', value: 130 },
{ 景区名称: '宏村', type: '大众点评分数', value: 150 },
{ 景区名称: '北京世界园艺博览会', type: '票价', value: 270 },
{ 景区名称: '北京世界园艺博览会', type: '星级', value: 59 },
{ 景区名称: '北京世界园艺博览会', type: '门票销量', value: 140 },
{ 景区名称: '北京世界园艺博览会', type: '大众点评分数', value: 250 },
{ 景区名称: '颐和园', type: '票价', value: 240 },
{ 景区名称: '颐和园', type: '星级', value: 30 },
{ 景区名称: '颐和园', type: '门票销量', value: 220 },
{ 景区名称: '颐和园', type: '大众点评分数', value: 95 },
{ 景区名称: '亚龙湾热带天堂森林公园', type: '票价', value: 290 },
{ 景区名称: '亚龙湾热带天堂森林公园', type: '星级', value: 40 },
{ 景区名称: '亚龙湾热带天堂森林公园', type: '门票销量', value: 220 },
{ 景区名称: '亚龙湾热带天堂森林公园', type: '大众点评分数', value: 110 },
{ 景区名称: '西递村', type: '票价', value: 310 },
{ 景区名称: '西递村', type: '星级', value: 35 },
{ 景区名称: '西递村', type: '门票销量', value: 220 },
{ 景区名称: '西递村', type: '大众点评分数', value: 100 },
{ 景区名称: '张家界', type: '票价', value: 340 },
{ 景区名称: '张家界', type: '星级', value: 70 },
{ 景区名称: '张家界', type: '门票销量', value: 250 },
{ 景区名称: '张家界', type: '大众点评分数', value: 110 },
{ 景区名称: '珠海长隆海洋王国', type: '票价', value: 130 },
{ 景区名称: '珠海长隆海洋王国', type: '星级', value: 25 },
{ 景区名称: '珠海长隆海洋王国', type: '门票销量', value: 350 },
{ 景区名称: '珠海长隆海洋王国', type: '大众点评分数', value: 140 },
{ 景区名称: '上海海昌海洋公园', type: '票价', value: 130 },
{ 景区名称: '上海海昌海洋公园', type: '星级', value: 25 },
{ 景区名称: '上海海昌海洋公园', type: '门票销量', value: 204 },
{ 景区名称: '上海海昌海洋公园', type: '大众点评分数', value: 160 },
{ 景区名称: '上海野生动物园', type: '票价', value: 150 },
{ 景区名称: '上海野生动物园', type: '星级', value: 25 },
{ 景区名称: '上海野生动物园', type: '门票销量', value: 150 },
{ 景区名称: '上海野生动物园', type: '大众点评分数', value: 225 },
];
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
