关于Echarts的操作

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/Rava722/article/details/52830570

1,首先声明,一下的操作基本上都是基于3.0以上的版本

2,去Echarts官网上下载所需要的原材料:Echarts的js文件,以及可能会用的Map的js或json文件,然后放入项目中,在对应的jsp或html中引入

然后需要创建一个div,用于承载将来的报表图片

例如:<div id="echart" style="width: 700px;height: 600px;margin-left: 80px;margin-top: 50px;"></div>

3,对于非地图一类的报表文件操作基本如下

var mychar = echarts.init(document.getElementById("echart"));
  mychar.setOption(option);

其中的option为报表所依赖的数据的json载体,在这个json中包含有具体的报表类型的设置:series的type属性

例如:一个柱图的报表的option

var option = {
   color: ['#3398DB'],
   tooltip : {
       trigger: 'axis',
       axisPointer : {            // 坐标轴指示器,坐标轴触发有效
           type : 'shadow'        // 默认为直线,可选为:'line' | 'shadow'
       },
       triggerOn:'click'
   },
   grid: {
       left: '3%',
       right: '4%',
       bottom: '3%',
       containLabel: true
   },
   xAxis : [
       {
           type : 'category',
           data : ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
           axisTick: {
               alignWithLabel: true
           }
       }
   ],
   yAxis : [
       {
           type : 'value'
       }
   ],
   series : [
       {
           name:'直接访问',
           type:'bar',
           barWidth: '60%',
           data:[10, 52, 200, 334, 390, 330, 220]
       }
   ]
}

4,下面是关于Map格式的操作,首先这部分操作不同于上面的报表,他的地图操作需要引入所对应地图的js或json文件

如果下载的是地图的json文件

var mychar = echarts.init(document.getElementById("echart"));
 
  $.get(url+"/js/map/beijing.json",function(json){
//前边的部分为地图json文件位置
  echarts.registerMap('beijing',json);
//第一个参数为map的具体类型即什么的地图,第二个参数为上一行function的参数
  mychar.setOption(JSON.parse(sj));
//括号里面为地图的数据的json
  });

如果下载的是地图的js文件

则需要以引入js的方式先将地图的js引入

<script type="text/javascript" src="${pageContext.request.contextPath}/js/map/china.js"></script>

var mychar = echarts.init(document.getElementById("echart"));

mychar.setOption(); //option中参数即为地图的数据的json,其中地图的类型也在里面进行设置,比如此处引入china.js 所以需要设置series的mapType为china



展开阅读全文

没有更多推荐了,返回首页