引用echar显示图形

本文介绍如何使用ECharts创建交互式图表,包括下载并引入ECharts JS文件、配置图表选项等步骤。通过实例展示了如何设置轴、图例及数据系列等关键元素。

配置项说明地址 http://echarts.baidu.com/option.html#title

1.下载js放入项目中,引入js

<script type="text/javascript" src="__PUBLIC__/lib/echarts/echarts.js"></script>

2.在html页面中引用

<div class="each-item" >
<div id="visit_echar" style="height:450px;margin-top: 10px;"></div>
 </div>

<script>

    var visitChar = echarts.init(document.getElementById('visit_echar'));
    var visitOption={
    tooltip: {
           
       },
       legend: {
           left: 'left',
           data: ['登陆量', '浏览量']
       },
       xAxis: {
           type: 'category',
           name: 'x',
           data: ['前日', '昨日', '今日']
       },
      
       grid: {
               left: 50, right: 50, top:80, bottom:40
       },
       
      yAxis: {
               show: true,
               splitNumber: 5,
               max:{$zuceNum}    
           },
       series: [
           {
               name: '登陆量',
               type: 'line',
               data: {$LoginData|json_encode}
           },
           {
               name: '浏览量',
               type: 'line',
               data: {$visitData|json_encode}
           }
       ]
   
   
        };
    visitChar.setOption(visitOption);

</script>

ECharts 中创建地区数量分布图表,通常使用地理坐标系(`geo`)配合散点图(`scatter`)或热力图(`heatmap`),以展示不同地区的数据密度或数值分布。以下是实现步骤和示例代码: ### 配置地理坐标系 首先需要定义地理坐标信息,包括各个地区的经纬度。ECharts 提供了 `geo` 组件来设置地图的地理范围、投影方式等。例如: ```javascript option = { geo: { map: 'china', // 指定地图类型为“中国” type: 'map', roam: true, // 允许缩放和平移 label: { emphasis: { show: false } }, itemStyle: { normal: { areaColor: '#f2f2f2', borderColor: '#666' }, emphasis: { areaColor: '#e2f4f4' } } } }; ``` ### 数据格式准备 按照指定的数据格式组织地区数据,包含名称、地理坐标(经度、纬度)以及数值。例如: ```json [ { "name": "北京", "value": [116.46, 39.92, 340] }, { "name": "上海", "value": [121.48, 31.22, 250] }, { "name": "广州", "value": [113.27, 23.13, 180] }, { "name": "深圳", "value": [114.07, 22.55, 210] } ] ``` 上述格式中,`value` 数组分别表示经度、纬度和数值[^1]。 ### 可视化配置 根据需求选择合适的图表类型进行可视化展示: #### 散点图(Scatter) 适合展示每个地区的具体位置及其对应的数值大小。 ```javascript option = { xAxis: {}, // 因为使用的是地理坐标系,xAxis 和 yAxis 可省略 yAxis: {}, series: [{ type: 'scatter', coordinateSystem: 'geo', // 使用地理坐标系 data: [ { name: "北京", value: [116.46, 39.92, 340] }, { name: "上海", value: [121.48, 31.22, 250] }, { name: "广州", value: [113.27, 23.13, 180] }, { name: "深圳", value: [114.07, 22.55, 210] } ], symbolSize: function (val) { return val[2]; // 第三个值作为圆点大小 }, itemStyle: { color: 'blue' } }] }; ``` #### 热力图(Heatmap) 适合展示区域的热度或密度分布。 ```javascript option = { visualMap: { min: 0, max: 500, calculable: true, inRange: { color: ['lightblue', 'darkblue'] }, text: ['高密度', '低密度'], realtime: false }, series: [{ type: 'heatmap', coordinateSystem: 'geo', data: [ { value: [116.46, 39.92, 340] }, { value: [121.48, 31.22, 250] }, { value: [113.27, 23.13, 180] }, { value: [114.07, 22.55, 210] } ] }] }; ``` ### 后端数据整合 结合引用中的 Java 示例代码,可以将数据库查询到的省市数据整理成所需的前端结构。通过 JDBC 查询数据库获取省市信息,并将其转换为包含经纬度和数值的数组格式,最终以 JSON 格式传递给前端显示[^2]。 ---
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值