深圳全飞鸿

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


function echarts_4() {

  2. // 基于准备好的dom，初始化echarts实例
  3. var myChart = echarts.init(document.getElementById('echart4'));

  5. option = {
  6.         tooltip: {
  7.                 trigger: 'axis',
  8.                 axisPointer: {
  9.                         lineStyle: {
  10.                                 color: '#dddc6b'
  11.                         }
  12.                 }
  13.         },
  14.         
  15.         legend: {
  16.                 top:'0%',
  17.         data:['沙井','越南'],
  18.                 textStyle: {
  19.                         color: 'rgba(255,255,255,.5)',
  20.                         fontSize:'12',
  21.         }
  22.     },
  23.         
  24.     grid: {
  25.         left: '10',
  26.                 top: '30',
  27.         right: '10',
  28.         bottom: '10',
  29.         containLabel: true
  30.     },

  32.     xAxis: [{
  33.         type: 'category',
  34.         boundaryGap: false,
  35.                 axisLabel:  {
  36.                 textStyle: {
  37.                                          color: "rgba(255,255,255,.6)",
  38.                                         fontSize:12,
  39.                 },
  40.             },
  41.         axisLine: {
  42.                         lineStyle: {
  43.                                 color: 'rgba(255,255,255,.2)'
  44.                         }

  46.         },
  47.                 data: ['01', '02', '03', '04', '05', '06', '07', '08', '09', '11', '12', '13', '14', '15', '16', '17', '18', '19', '20', '21', '22', '23', '24']

  49.                 }, {

  51.         axisPointer: {show: false},
  52.         axisLine: {  show: false},
  53.         position: 'bottom',
  54.         offset: 20,

  56.       

  58.     }],

  60.     yAxis: [{
  61.         type: 'value',
  62.         axisTick: {show: false},
  63.         axisLine: {
  64.             lineStyle: {
  65.                 color: 'rgba(255,255,255,.1)'
  66.             }
  67.         },
  68.        axisLabel:  {
  69.                 textStyle: {
  70.                                          color: "rgba(255,255,255,.6)",
  71.                                         fontSize:12,
  72.                 },
  73.             },

  75.         splitLine: {
  76.             lineStyle: {
  77.                  color: 'rgba(255,255,255,.1)'
  78.             }
  79.         }
  80.     }],
  81.         
  82.     series: [
  83.                 {
  84.         name: '沙井',
  85.         type: 'line',
  86.         smooth: true,
  87.         symbol: 'circle',
  88.         symbolSize: 5,
  89.         showSymbol: false,
  90.         lineStyle: {
  91.                         
  92.             normal: {
  93.                                 color: '#0184d5',
  94.                 width: 2
  95.             }
  96.         },
  97.         areaStyle: {
  98.             normal: {
  99.                 color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
  100.                     offset: 0,
  101.                     color: 'rgba(1, 132, 213, 0.4)'
  102.                 }, {
  103.                     offset: 0.8,
  104.                     color: 'rgba(1, 132, 213, 0.1)'
  105.                 }], false),
  106.                 shadowColor: 'rgba(0, 0, 0, 0.1)',
  107.             }
  108.         },
  109.                         itemStyle: {
  110.                         normal: {
  111.                                 color: '#0184d5',
  112.                                 borderColor: 'rgba(221, 220, 107, .1)',
  113.                                 borderWidth: 12
  114.                         }
  115.                 },
  116.          data: [527000, 437000, 545000, 456000, 488000, 291000, 533000, 677000, 668000, 543000, 599000, 420000, 450000, 567000, 535000, 418000, 399000, 387000, 498003, 577700, 500000, 417000, 399000, 388000]

  118.                 },
  119.                 {
  120.         name: '越南',
  121.         type: 'line',
  122.         smooth: true,
  123.         symbol: 'circle',
  124.         symbolSize: 5,
  125.         showSymbol: false,
  126.         lineStyle: {
  127.                         
  128.             normal: {
  129.                                 color: '#00d8d7',
  130.                 width: 2
  131.             }
  132.         },
  133.         areaStyle: {
  134.             normal: {
  135.                 color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
  136.                     offset: 0,
  137.                     color: 'rgba(0, 216, 135, 0.4)'
  138.                 }, {
  139.                     offset: 0.8,
  140.                     color: 'rgba(0, 216, 135, 0.1)'
  141.                 }], false),
  142.                 shadowColor: 'rgba(0, 0, 0, 0.1)',
  143.             }
  144.         },
  145.                 itemStyle: {
  146.                         normal: {
  147.                                 color: '#00d8d7',
  148.                                 borderColor: 'rgba(221, 220, 107, .1)',
  149.                                 borderWidth: 12
  150.                         }
  151.                 },
  152.         data: [127000, 237000, 145000, 156000, 188000, 99000, 133000, 177000, 168000, 143000, 199000, 220000, 250000, 267000, 235000, 218000, 199000, 187000, 198003, 177700, 200000, 217000, 199000, 188000]

  154.                 },
  155.         ]

  157. };
  158.       
  159. // 使用刚指定的配置项和数据显示图表。
  160. myChart.setOption(option);
  161. window.addEventListener("resize",function(){
  162.         myChart.resize();
  163. });
  164.    
复制代码

}





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