資料視覺化：基於 Echarts + Python 實現的動態實時大屏範例【11】

// 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} <br/>{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();