深圳全飞鸿

标题: echart 之bar的一种案例 [打印本页]
作者: zhgc    时间: 2021-12-18 17:57
标题: echart 之bar的一种案例


  1. function echarts_2() {
  2.     // 基于准备好的dom，初始化echarts实例
  3.     var myChart = echarts.init(document.getElementById('echart2'));
  4.     option = {
  5.                         //  backgroundColor: '#00265f',
  6.                         tooltip: {
  7.                                 trigger: 'axis',
  8.                                 axisPointer: { type: 'shadow'}
  9.                         },
  10.                         grid: {
  11.                                 left: '0%',
  12.                         top:'10px',
  13.                                 right: '0%',
  14.                                 bottom: '4%',
  15.                                 containLabel: true
  16.                         },
  17.                         xAxis: [{
  18.         type: 'category',
  19.               data: ['08', '09', '10', '11', '12', '13', '14', '15', '16', '17', '18'],
  20.         axisLine: {
  21.           show: true,
  22.                                         lineStyle: {
  23.             color: "rgba(255,255,255,.1)",
  24.             width: 1,
  25.             type: "solid"
  26.           },
  27.         },
  28.                
  29.         axisTick: {
  30.             show: false,
  31.         },
  32.                                 axisLabel:  {
  33.                                         interval: 0,
  34.                                         // rotate:50,
  35.                                         show: true,
  36.                                         splitNumber: 15,
  37.                                         textStyle: {
  38.                                                 color: "rgba(255,255,255,.6)",
  39.                                                 fontSize: '12',
  40.                                         },
  41.                                 },
  42.                         }],
  43.                         yAxis: [{
  44.                                         type: 'value',
  45.                                         axisLabel: {
  46.                                                  //formatter: '{value} %'
  47.                                 show:true,
  48.                                  textStyle: {
  49.                                                 color: "rgba(255,255,255,.6)",
  50.                                                                                         fontSize: '12',
  51.                                                                         },
  52.                                         },
  53.                                         axisTick: {
  54.                                                         show: false,
  55.                                         },
  56.                                         axisLine: {
  57.                                                         show: true,
  58.                                                         lineStyle: {
  59.                                                                         color: "rgba(255,255,255,.1        )",
  60.                                                                         width: 1,
  61.                                                                         type: "solid"
  62.                                                         },
  63.                                         },
  64.                                         splitLine: {
  65.                                                         lineStyle: {
  66.                                                                  color: "rgba(255,255,255,.1)",
  67.                                                         }
  68.                                         }
  69.                         }],
  70.                         series: [
  71.                         {
  72.                                 type: 'bar',
  73.                                 data: [1500, 1200, 600, -200, 300, 300, 900, 1200, 600, 200, 300],
  74.                                 barWidth:'35%', //柱子宽度
  75.                                 // barGap: 1, //柱子之间间距
  76.                                 itemStyle: {
  77.                                         normal: {
  78.                                                 color:'#27d08a',
  79.                                                 opacity: 1,
  80.                                                 barBorderRadius: 5,
  81.                                         }
  82.                                 }
  83.                         }
  84.                        
  85.                 ]
  86.         };
  87.       
  88.         // 使用刚指定的配置项和数据显示图表。
  89.         myChart.setOption(option);
  90.         window.addEventListener("resize",function(){
  91.             myChart.resize();
  92.         });
  93.     }
复制代码






欢迎光临 深圳全飞鸿 (http://www.nagomes.com/disc/) Powered by Discuz! X3.2