five.html 3.7 KB
<!DOCTYPE html>
<html style="height: 100%;width: 100%;">

<head>
    <script src="ue.js"></script>
    <meta charset="utf-8">
</head>

<body style="height: 100%;width: 100%; margin: 0;font-size:1rem;line-height:150%;overflow-y: hidden;overflow-x:hidden;">
    <div id="container" style="height: 100%;width: 100%;"></div>
    <script type="text/javascript" src="jquery-1.11.0.min.js"></script>
    <script type="text/javascript" src="echarts.min.js"></script>
    <script type="text/javascript" src="ajax.js"></script>
    <script type="text/javascript">


        var dom = document.getElementById("container");
        var myChart = echarts.init(dom);
        var app = {};
        var option;

        function eacharsassignment(s) {
            console.log(s);



            var name = s.name;
            var dataX = s.dataX;
            var dataY1 = s.dataY1;
            var dataY2 = s.dataY2;
          
            

            var option = {
  
  tooltip: {
    trigger: "axis",
    axisPointer: {
      // 坐标轴指示器,坐标轴触发有效
      type: "shadow", // 默认为直线,可选为:'line' | 'shadow'
    },
  },
  grid: {
    top: '15%',
                    left: '0%',
                    right: '0%',
                    bottom: '0%',
                    containLabel: true,
                },
  legend: {
    data: name,
    left:"left",
   
    textStyle: {
      color: "#fff",
    },
    itemWidth: 12,
    itemHeight: 10,
    // itemGap: 35
  },
  xAxis: {
    type: "category",
    data: dataX,
    axisLine: {
      lineStyle: {
        color: "white",
      },
    },
    axisLabel: {
      // interval: 0,
      // rotate: 40,
      textStyle: {
        fontFamily: "Microsoft YaHei",
      },
    },
  },

  yAxis: {
    type: "value",
    
    axisLine: {
      show: false,
      lineStyle: {
        color: "white",
      },
    },
    splitLine: {
      show: true,
      lineStyle: {
        color: "rgba(255,255,255,0.3)",
      },
    },
    axisLabel: {},
  },
 
  series: [
    {
      name: name[0],
      type: "bar",
      barWidth: "15%",
      itemStyle: {
        normal: {
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            {
              offset: 0,
              color: "rgba(27, 255, 188, 1)",
            },
            {
              offset: 1,
              color:  "rgba(27, 255, 188, 0.1)",
            },
          ]),borderColor: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            {
              offset: 0,
              color: "rgba(27, 255, 188, 0.5)",
            },
            {
              offset: 1,
              color: "rgba(27, 255, 188, 0.5)",
            },
          ]),
          barBorderRadius: 12,
        },
      },
      data:dataY1,
    },
     
    
    {
      name:name[1],
      type: "bar",
      barWidth: "15%",
      itemStyle: {
        normal: {
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            {
              offset: 0,
              color: "#F29D0C",
            },
            {
              offset: 1,
              color:  "rgba(242, 157, 12, 0.1)",
            },
          ]),borderColor: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            {
              offset: 0,
              color:  "rgba(242, 157, 12, 0.5)",
            },
            {
              offset: 1,
              color:  "rgba(242, 157, 12, 0.5)",
            },
          ]),
          barBorderRadius: 11,
        },
      },
      
      data: dataY2,
    },
    
  ],
};


            if (option && typeof option === 'object') {

            }
            myChart.setOption(option);
        };




        ue.interface.setEchatsValue = function (s) {
            eacharsassignment(s);
            console.log(s);
        }
    </script>
</body>

</html>