读书笔记四

用echart画图:

首先,要先导入echart的jar包,下载地址如下:http://echarts.baidu.com/,然后放入自己的项目中,做一个简单的图的代码如下:

放在body中的代码:

<div id="main2" style="width: 400px;height:400px;float:left"></div>

然后便是js中的代码:

 var myChart = echarts.init(document.getElementById('main2'));
 
 
  // 指定图表的配置项和数据
             option2 = {
                    title : {
                        text: '行业注册数量',
                        
                    },
                    tooltip : {
                        trigger: 'axis'
                    },
                    legend: {
                        data:['数量']
                    },
                    toolbox: {
                        show : true,
                        feature : {
                            dataView : {show: true, readOnly: false},
                            magicType : {show: true, type: ['line', 'bar']},
                            restore : {show: true},
                            saveAsImage : {show: true}
                        }
                    },
                    calculable : true,
                    xAxis : [
                        {
                            type : 'category',
                            data : ["2016","207","2018"],
                        }
                    ],
                    yAxis : [
                        {
                            type : 'value'
                        }
                    ],
                    series : [
                        {
                            name:'数量',
                            type:'bar',
                            data:[1,2,3,],
                            markPoint : {
                                data : [
                                    {type : 'max', name: '最大值'},
                                    {type : 'min', name: '最小值'}
                                ]
                            },
                            markLine : {
                                data : [
                                    {type : 'average', name: '平均值'}
                                ]
                            }
                        }
   
                    ]
                };

  // 使用刚指定的配置项和数据显示图表。
  myChart.setOption(option2);

以上便是所有的js代码,当然,前提是要导入下载的echart.js包,还有值得注意的是,必须将js放在body下边,因为在网页执行的时候会按照顺序来执行,如果放在body上边就会找不到。

猜你喜欢

转载自www.cnblogs.com/ljysy/p/9211181.html