使用ECharts绘制可视化图表

2019独角兽企业重金招聘Python工程师标准>>>

今天在网上找了一篇关于使用ECharts绘制可视化图表的文章，下载后仔细研究发现由于时间的原因，文中所写的版本与当前最新版本根本不一样，且其内容全部照搬帮助文档，经研究非常不易读懂，由于最近项目需要此项技术，经过研究后，整理出如下精华代码。

<!--引入核心js文件-->
<script type="text/jscript" src="js/esl.js"></script>

<!--创建一个放置图形的dom容器,
  Id与下文var myChart = ec.init(document.getElementById('main'));
  中的Id值对应！
  -->
        <div id="main" style="height:500px;border:1px solid #ccc;padding:10px;">
        </div>
         

<script type="text/javascript">
         //自定义一个月份集合
         var TESTarray = new Array();
   for(var i = 0 ; i<20 ; i++){
    TESTarray[i] = i + "_月/君子之耀";
   }
   //当前实验路径：js文件夹和页面同级，下载ECharts后解压将
   //echarts-1.3.1\doc\example\www下js文件下所有js复制到当前项目js文件夹中。
            require.config({
                paths: {
                    echarts: './js/echarts',
                    'echarts/chart/bar': './js/echarts',
                    'echarts/chart/line': './js/echarts'
                }
            });
            require(
     [
      'echarts',
       'echarts/chart/bar',
        'echarts/chart/line'], function(ec){
                var myChart = ec.init(document.getElementById('main'));
                var option = {
                    tooltip: {
      //触发器类型，感觉没啥作用，效果图见最下方
                        trigger: 'axis'
                    },
                    legend: {
                        data: ['蒸发量', '降水量']//需要显示的数据种类
                    },
                    toolbox: {//此节点下配置右上角菜单项
                        show: true,//是否显示右上角菜单，false不显示，true显示
                        feature: {
                            mark: true,//是否显示辅助线按钮
                            dataView: {
                                readOnly: false//是否可以更改数据视图中的数据
                            },
                            magicType: ['bar', 'line'],//折线图按钮和柱形图按钮顺序bar为柱形图，line为折线图
                            restore: true,//是否显示还原按钮
                            saveAsImage: true//是否显示保存图片按钮
                        }
                    },
                    calculable: true,
                    xAxis: [{//X坐标
                        type: 'category',
      data: TESTarray//引入上文自定义的刻度
      //X轴需要显示的刻度
      //data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月',
      //'13月', '15月']
                    }],
                    yAxis: [{//Y坐标，貌似Y轴的数据暂时没有，好像每种不同图形对应不同刻度
                        type: 'value',
                        splitArea: {
                            show: true//是否显示Y轴颜色加深
                        }
                    }],
                    series: [{
                        name: '蒸发量',//对应legend.data数据种类，
                        type: 'line',//设置当前项加载时使用折线
                        data: [2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3]//对应数据种类的值，数组形式
                    }, {
                        name: '降水量',
                        type: 'line',//设置当前项加载时使用折线
                        data: [2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3]
                    }]
                };
                myChart.setOption(option);
            });
        </script>

触发器效果图：

item触发

axis触发

研究后的效果图如下：

 

 

 

转载于:https://my.oschina.net/junzizhiyao/blog/181747