echarts数据显示在最顶端

最新推荐文章于 2024-03-05 11:40:03 发布

小小1992

最新推荐文章于 2024-03-05 11:40:03 发布

阅读量1.1k

点赞数 1

文章标签： echarts javascript 前端

本文链接：https://blog.csdn.net/u014645827/article/details/132080071

版权

<!DOCTYPE html>
<html>
   <head>
       <meta charset="utf-8">
       <title></title>
       <style>
           .con{
               position: absolute;
               width: 505px;
               height:260px;
               /* background-color: aquamarine; */
           }
           .con-po{
               position: absolute;
               width: 2px;
               height: 134px;
               background-color: #cecece;
               top: 39px;
               right: 157px;
           }
           .con-r{
               position: absolute;
               top: 2px;
               left: 148px;
               color: #717171;
           }
           .con-num{
               position: relative;
               top: 39px;
               left: 148px;
               color: #717171;
               font-size: 14px;
           }
           .con-bg{
               position: relative;
               background-color: aqua;
               width: 90%;
               height: 90%;
               top: 0px;
               left: 0px;
               right: 0px;
               bottom: 0px;
           }
           select{
               color: #808080;
               width: 80px;
               height: 30px;
           }
       </style>
   </head>
   <body>
       <div class="con">
           <select>
           <option value="volvo">Volvo</option>
           <option value="saab">Saab</option>
           <option value="opel">Opel</option>
           <option value="audi">Audi</option>
           </select>
           <div id="main" style="width:100%;height: 100%;"></div>
       </div>
       <script src="js/echarts.min.js"></script>
       <script>

           var chartDom = document.getElementById('main');
           var myChart = echarts.init(chartDom);
           var option;

           option = {
               grid: { //图表的上下左右的距离
               left: '0%',
               right: '13%',
               bottom: '10%',
               top: '8%',
               padding: '0 0 0 0',
               containLabel: true,
               },

           title: {
           text: 'World Population'
           },
           tooltip: {
           trigger: 'axis',

           },
           legend: {},
           // grid: {
           // left: '3%',
           // right: '4%',
           // bottom: '3%',
           // containLabel: true
           // },
           xAxis: {
           type: 'value',
           boundaryGap: [0, 0.01],
               splitLine: { show: false },
               axisTick: { show: false },
               axisLine: { show: false },
               axisLabel: { show: false },
           },
           yAxis: {
           type: 'category',
           data: ['征拆', '地连墙', '土方开挖', '主体结构'],
               splitLine: { show: false },
               axisTick: { show: false },
               axisLine: { show: false },
               axisLabel: { show: true ,
               textStyle: {
               color: '#666',
               fontSize: 14,
               }},
           },
           series: [
           {
               label: {
                   show: true,
                   position: [400, 10],
                   valueAnimation: true
               },
               color: new echarts.graphic.LinearGradient(
               0, 0, 1, 0,
               [
               { offset: 0, color: '#006CD9' },
               { offset: 1, color: '#66B2FE' }
               ]
               ),
               showBackground: true,
               backgroundStyle: {
                   color: 'rgba(180, 180, 180, 0.2)'
               },

           type: 'bar',
           data: [18444882, 23, 290, 104 ]
           },

           ]
           };
           option && myChart.setOption(option);
       </script>
   </body>
</html>