echarts+vue动态绘制波纹世界城市效果，title富文本效果

共5个文件

js：3个

png：1个

html：1个

vue.js

echarts

需积分: 50 35 浏览量 2019-03-01 09:33:00 上传评论收藏 519KB RAR 举报

在本项目中，我们主要探讨如何使用Echarts与Vue.js框架结合，实现动态绘制波纹效果的世界城市地图，以及在Echarts的title中添加富文本背景图片效果。让我们逐一解析这些关键技术点。 1. **Echarts**： Echarts 是一个由百度开发的开源数据可视化库，支持丰富的图表类型，如折线图、柱状图、饼图等，同时也支持地图图表。在本案例中，Echarts 被用于绘制世界城市地图，并添加动态波纹效果。这需要利用Echarts的地图系列（series-type: 'map'），并配置特定的地图数据源（如world.js）来显示世界地图。同时，通过自定义事件和动画设置，实现城市位置上的波纹扩散效果。 2. **Vue.js**： Vue.js 是一个轻量级的前端JavaScript框架，用于构建用户界面。在这个项目中，Vue负责管理组件状态和数据绑定，实现动态模拟更新。例如，当用户交互或数据发生变化时，Vue会自动更新视图。我们可以创建一个Vue组件，包含Echarts实例，并在Vue的生命周期钩子函数中初始化和更新Echarts图表。 3. **动态模拟更新**：动态模拟更新是指在运行时根据数据变化实时更新图表。在Echarts中，可以通过`setOption`方法更新图表配置，以反映数据的变化。例如，当需要改变某个城市的波纹效果时，可以修改相应的数据项，然后调用`setOption`，Echarts会自动处理更新过程，呈现出动态效果。 4. **富文本背景图片效果**：在Echarts的title配置中，我们可以利用富文本特性（rich text）来实现更复杂的样式效果，包括插入背景图片。这需要定义一个富文本样式对象，设置其背景为图片，然后在title文本中引用这个样式。Echarts的富文本支持HTML标签，所以可以使用`<img>`标签嵌入图片，并通过CSS属性控制其大小和位置。 5. **相关文件详解**： - `map.html`：这是项目的主HTML文件，包含Vue和Echarts的初始化代码，以及可能的模板结构。 - `world.js`：这是Echarts使用的地理坐标系文件，包含了世界地图的数据，用于Echarts渲染地图。 - `echarts.min.js`：Echarts的核心库，提供图表绘制和数据处理功能。 - `vue.min.js`：Vue.js的压缩版库，用于构建用户界面。 - `Picture1.png`：可能作为富文本title的背景图片，或者是用于地图上其他装饰元素的图片。本项目结合了Echarts的强大可视化能力与Vue的便捷数据驱动特性，实现了动态波纹效果的世界城市地图，并在title中添加了富文本背景图片，为用户带来了生动且富有交互性的视觉体验。在实际开发中，我们可以进一步优化性能，增加更多交互功能，提高用户体验。

资源推荐

资源详情

资源评论

收起资源包目录

map.rar （5个子文件）

echarts.min.js 730KB

vue.min.js 77KB

world.js 987KB

Picture1.png 34KB

map.html 14KB

<html> <head> <meta charset='utf-8'> <script src='echarts.min.js'></script> <script src='vue.min.js'></script> <script src="world.js" type="text/javascript" charset="utf-8"></script> <style> html, body{ background: #CDCDCD; } #tablediv{ float:left; margin-top:100px; } #tablediv table{ border-collapse:collapse; border:1px solid gray; } #tablediv table th{ font-size:12px; border:none; background: #762E9F; } #tablediv table td:not(:first-child){ text-align: center; } #explain{ clear:both; position: absolute; bottom: 0; left: 0; z-index: 10; width:100%; padding-left: 100px; } #explain div{ margin-right: 120px; display: inline-block; font-size: 13px; } #normal,#p1,#p2{ display: inline-block; width:100px; height: 26px; } #normal{ background: #04FE09; } #p1{ background: #F7C60A; } #p2{ background: #F70200 } </style> </head> <body> <div id="main" style="width: 75%;height:100vh;float: left;"></div> <div id="tablediv" style="width: 25%;"> <table> <thead> <th>Country</th> <th>Non-close</th> <th>Active P1</th> <th>Active P2</th> </thead> <tbody> <tr v-for="item in cityData"> <td>{{item[0].name}}</td> <td v-if="item[0].value">1</td> <td v-else>0</td> <td v-if="item[0].color === color1[1]">1</td> <td v-else>0</td> <td v-if="item[0].color === color1[2]">1</td> <td v-else>0</td> </tr> </tbody> </table> </div> <div id="explain"> <div> <span id="normal"></span><br/> Normal<br/><br/> </div> <div> <span id="p1"></span><br/> P1 incident<br/>Case delay for 3 days </div> <div> <span id="p2"></span><br/> P2 incident<br/>Case delay 1 week </div> </div> <script> // 获取echarts的容器 var chart = echarts.init(document.getElementById("main")); /* 图中相关城市经纬度,根据你的需求添加数据关于国家的经纬度，可以用首都的经纬度或者其他城市的经纬度 */ var geoCoordMap = { 'India':[78.96288,20.593684], 'SouthAfrica': [22.937506, -30.559482], 'China':[104.195397,35.86166], 'USA': [-118.243685,34.052234], 'Thailand':[100.992541,15.870032], 'Malaysia':[101.975766,4.210484], "Singapore": [103.819836,1.352083], 'Vietnam':[108.277199,14.058324], 'SouthKorea':[127.766922,35.907757], 'Japan':[138.252924,36.204824], "HongKong": [116.109497,22.396428], 'Macua':[112.5582344733,22.1966661282], 'Philippines':[121.774017,12.879721], 'Indonesia':[113.921327,-0.789275], 'Australia':[133.775136,-25.274398], 'NewZealand':[174.885971,-40.900557] }; var color1=['#04FE09','#F7C60A','#F70200']; /* 记录下起点城市名称，以及权重 */ // 这里面的数据,如果通过ajax来获取数据的话，还要进行相应的处理 var CityData0 = [ [{name: 'India',value: 100,color:color1[0],labelPositon:"left",offset:[0,0]}], [{name: 'SouthAfrica',value: 30,color:color1[0],labelPositon:"left",offset:[0,0]}], [{name: "Singapore",value: 60,color:color1[1],labelPositon:"bottom",offset:[-20,-5]}], [{name: "USA",value: 60,color:color1[0],labelPositon:"left",offset:[0,0]}], [{name: "China",value: 60,color:color1[0],labelPositon:"left",offset:[0,0]}], [{name: "Thailand",value: 60,color:color1[1],labelPositon:"left",offset:[0,0]}], [{name: "Macua",value: 100,color:color1[0],labelPositon:"left",offset:[0,0]}], [{name: "Malaysia",value: 60,color:color1[0],labelPositon:"left",offset:[0,0]}], [{name: "Vietnam",value: 60,color:color1[2],labelPositon:"bottom",offset:[-10,-7]}], [{name: "SouthKorea",value: 60,color:color1[0],labelPositon:"bottom",offset:[0,0]}], [{name: "Japan",value: 60,color:color1[0],labelPositon:"right",offset:[0,0]}], [{name: "HongKong",value: 100,color:color1[0],labelPositon:"right",offset:[0,0]}], [{name: "Philippines",value: 60,color:color1[2],labelPositon:"right",offset:[0,0]}], [{name: "Indonesia",value: 60,color:color1[0],labelPositon:"right",offset:[0,0]}], [{name: "Australia",value: 60,color:color1[1],labelPositon:"left",offset:[0,0]}], [{name: "NewZealand",value: 60,color:color1[0],labelPositon:"left",offset:[0,0]}] ]; var color = ['#9ae5fc', '#dcbf71']; // 自定义图中要用到的颜色 var series = []; // 用来存储地图数据 var CityData = new Vue({ el: '#tablediv', data: { cityData: CityData0 } }) series.push({ // 散点效果 type: 'effectScatter', coordinateSystem: 'geo', // 表示使用的坐标系为地理坐标系 zlevel: 3, rippleEffect: { brushType: 'stroke' // 波纹绘制效果 }, symbol:'rect', symbolSize:[200,100], label: { normal: { // 默认的文本标签显示样式 show: true, position: 'left', // 标签显示的位置 formatter: '{b}' // 标签内容格式器 } }, itemStyle: { normal: { color: color[0] } }, data: CityData.cityData.map(function(dataItem) { return { name: dataItem[0].name, value: geoCoordMap[dataItem[0].name], // 城市位置 symbolSize: dataItem[0].value / 8, // 散点的大小，通过之前设置的权重来计算，val的值来自data返回的value itemStyle:{ color:dataItem[0].color }, label:{ position:dataItem[0].labelPositon, offset:dataItem[0].offset } }; }) }); // 最后初始化世界地图中的相关数据 chart.setOption({ title: { text:"{titleBg|''}", textStyle:{ rich: { titleBg: { backgroundColor:{image: 'Picture1.png'}, height: 100, width: 100 } } } }, geo: { map: 'world', // 与引用进来的地图js名字一致 roam: false, // 禁止缩放平移 itemStyle: { // 每个区域的样式 normal: { areaColor: '#22323A' }, emphasis: { areaColor: '#AADDF2' } } }, series: series, // 将之前处理的数据放到这里 textStyle: { fontSize: 12 } }); var timesRun = 0; var i = setInterval(function() { //异步加载数据 //$.get('data.json').done(function (data) { //更新数据 CityData.cityData = cityarr[timesRun]; //重设散点 chart.setOption({ series:[ { data: CityData.cityData.map(function(dataItem) { return { name: dataItem[0].name, value: geoCoordMap[dataItem[0].name], // 城市位置 symbolSize: dataItem[0].value / 8, // 散点的大小，通过之前设置的权重来计算，val的值来自data返回的value itemStyle:{ color:dataItem[0].color }, label:{ position:dataItem[0].labelPositon, offset:dataItem[0].offset } }; }) } ] }) if(timesRun==5){ timesRun =0; }else{ timesRun += 1; } //}) }, 5000); var CityData1 =[ [{name: 'India',value: 50,color:color1[0],labelPositon:"left",offset:[0,0]}], [{name: 'SouthAfrica',value: 60,color:color1[2],labelPositon:"left",offset:[0,0]}], [{name: "Singapore",value: 60,color:color1[0],labelPositon:"bottom",offset:[-20,-5]}], [{name: "USA",value: 60,color:color1[2],labelPositon:"left",offset:[0,0]}], [{name: "China",value: 60,color:color1[0],labelPositon:"left",offset:[0,0]}], [{name: "Thailand",value: 60,color:color1[0],labelPositon:"left",offset:[0,0]}], [{name: "Macua",value: 90,color:color1[0],labelPositon:"left",offset:[0,0]}], [{name: "Malaysia",value: 90,color:color1[1],labelPositon:"left",offset:[0,0]}], [{name: "Vietnam",value: 60,color:color1[0],labelPositon:"bottom",offset:[-10,-

评论收藏

内容反馈