关于Echarts的操作

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



  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
ECharts 绘制饼图需要以下步骤: 1. 引入 EChartsJavaScript 文件。 2. 在 HTML 创建一个用于显示图表的 DOM 元素。 3. 使用 ECharts 的 API 初始化图表。 4. 配置图表的基本信息,如标题、提示框等。 5. 配置饼图的数据和样式,如饼图的半径、颜色、标签等。 下面是一个简单的示例代码: ```html <!DOCTYPE html> <html> <head> <title>ECharts 饼图示例</title> <script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.1.2/echarts.min.js"></script> </head> <body> <div id="chart" style="width: 600px; height: 400px;"></div> <script> // 初始化图表 var chart = echarts.init(document.getElementById('chart')); // 配置基本信息 chart.setOption({ title: { text: '年龄分布', left: 'center' }, tooltip: { trigger: 'item', formatter: '{b}: {c} ({d}%)' }, legend: { orient: 'vertical', left: 'left', data: ['20岁以下', '20-30岁', '30-40岁', '40岁以上'] }, series: [{ name: '年龄分布', type: 'pie', radius: '55%', center: ['50%', '60%'], data: [ {value: 20, name: '20岁以下'}, {value: 35, name: '20-30岁'}, {value: 25, name: '30-40岁'}, {value: 20, name: '40岁以上'} ], itemStyle: { emphasis: { shadowBlur: 10, shadowOffsetX: 0, shadowColor: 'rgba(0, 0, 0, 0.5)' } } }] }); </script> </body> </html> ``` 在上述代码,我们使用 ECharts 的 `init` 方法初始化了一个图表,并使用 `setOption` 方法配置了饼图的基本信息和数据。其,`series` 属性的 `type` 属性指定了图表类型为饼图,`data` 属性指定了饼图的数据,`itemStyle` 属性指定了饼图的样式。 需要注意的是,上述代码ECharts 版本为 5.1.2,如果你使用的是其他版本的 ECharts,可能会有些许差异。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值