lemon_echarts

功能描述

ECharts 高性能移动端图表模块，是继承于 Echarts 图表所定制的模块，我们希望大家在APICloud快捷的创建自己喜欢的图表！

依赖的模块

  1. Echarts

快速使用

  1. <style>html,body { background: #ffffff;}</style>
  2. <div id="lemon_echarts_main" style="min-width: 320px; width:100%; height:400px;"></div>
  4. var myChart = echarts.init(document.getElementById('lemon_echarts_main'));
  6. // 柱状图表
  7. var lemon_option_1 = {
  8.     title: {
  9.         text: 'ECharts 示例'
  10.     },
  11.     xAxis: {
  12.         type: 'category',
  13.         data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
  14.     },
  15.     yAxis: {
  16.         type: 'value'
  17.     },
  18.     series: [{
  19.         data: [820, 932, 901, 934, 1290, 1330, 1320],
  20.         type: 'line'
  21.     }]
  22. };
  24. // 线性图表
  25. var lemon_option_2 = {
  26.     xAxis: {
  27.         type: 'category',
  28.         data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
  29.     },
  30.     yAxis: {
  31.         type: 'value'
  32.     },
  33.     series: [{
  34.         data: [820, 932, 901, 934, 1290, 1330, 1320],
  35.         type: 'line'
  36.     }]
  37. };
  39. // 饼状图表
  40. var lemon_option_3 = {
  41.     title : {
  42.         text: '某站点用户访问来源',
  43.         subtext: '纯属虚构',
  44.         x:'center'
  45.     },
  46.     tooltip : {
  47.         trigger: 'item',
  48.         formatter: "{a} <br/>{b} : {c} ({d}%)"
  49.     },
  50.     legend: {
  51.         orient: 'vertical',
  52.         left: 'left',
  53.         data: ['直接访问','邮件营销','联盟广告','视频广告','搜索引擎']
  54.     },
  55.     series : [
  56.         {
  57.             name: '访问来源',
  58.             type: 'pie',
  59.             radius : '55%',
  60.             center: ['50%', '60%'],
  61.             data:[
  62.                 {value:335, name:'直接访问'},
  63.                 {value:310, name:'邮件营销'},
  64.                 {value:234, name:'联盟广告'},
  65.                 {value:135, name:'视频广告'},
  66.                 {value:1548, name:'搜索引擎'}
  67.             ],
  68.             itemStyle: {
  69.                 emphasis: {
  70.                     shadowBlur: 10,
  71.                     shadowOffsetX: 0,
  72.                     shadowColor: 'rgba(0, 0, 0, 0.5)'
  73.                 }
  74.             }
  75.         }
  76.     ]
  77. };
  79. myChart.setOption(lemon_option_1);

特别说明

  1. 使用本模块注意会与同ECharts模块冲突，请开发者谨慎选择，本模块为1.0版本，后续会陆续更新。