// import * as echarts from 'echarts';
var idContainer_1 = "container_1";
var chartDom = document.getElementById(idContainer_1);
function initEchart_1(){
var myChart = echarts.init(chartDom, window.gTheme);
var option = {
title: {
text: " 产品销量分析 ",
left: "left",
textStyle: {
color: "#3690be",
fontSize: "10",
},
},
tooltip: {
trigger: "item",
formatter: "{a}
{b}: {c}
百万
",
position: function (p) {
// 其中 p 为当前鼠标的位置
return [p[0] + 10, p[1] - 10];
},
},
legend: {
data: [" 成本 ", " 利润 "],
textStyle: {
color: "rgba(255,255,255,.5)",
fontSize: "10",
},
// 距离顶部边框的相对距离，外汇跟单gendan5.com太近压到了 title
top: "10%",
// orient:"vertical"
},
grid: {
left: "3%",
right: "4%",
bottom: "3%",
// 距离顶部边框的相对距离，太近压到了 legend
top: "30%",
containLabel: true,
},
xAxis: {
name: ' 百万 ',
type: "value",
axisLabel: {
textStyle: {
color: "rgba(255,255,255,.5)",
fontSize: 10,
},
},
axisLine: {
lineStyle: {
color: "rgba(255,255,255,.2)",
},
},
splitLine: {
lineStyle: {
color: "rgba(255,255,255,.1)",
},
},
},
yAxis: {
type: "category",
data: ["Mate", "P", "Nova", " 畅享 "],
axisLabel: {
textStyle: {
color: "rgba(255,255,255,.5)",
fontSize: 10,
},
},
axisLine: {
lineStyle: {
color: "rgba(255,255,255,.2)",
},
},
splitLine: {
lineStyle: {
color: "rgba(255,255,255,.1)",
},
},
},
series: [
{
name: " 成本 ",
type: "bar",
stack: "total",
label: {
show: true,
},
emphasis: {
focus: "series",
},
data: [334, 390, 330, 320],
},
{
name: " 利润 ",
type: "bar",
stack: "total",
label: {
show: true,
},
emphasis: {
focus: "series",
},
data: [134, 90, 230, 210],
},
],
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
window.addEventListener("resize", function () {
myChart.resize();
});
}
function asyncData_1() {
$.getJSON("json/bar_stacked.json").done(function (data) {
var myChart = echarts.init(document.getElementById(idContainer_1));
myChart.setOption({
series: [{ data: data }],
});
}); //end $.getJSON}
}
initEchart_1();
asyncData_1();