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 },
];
One platform to build and deploy the best data apps
Experiment and prototype by building visualizations in live JavaScript notebooks. Collaborate with your team and decide which concepts to build out.
Use Observable Framework to build data apps locally. Use data loaders to build in any language or library, including Python, SQL, and R.
Seamlessly deploy to Observable. Test before you ship, use automatic deploy-on-commit, and ensure your projects are always up-to-date.