几个不错的echarts +百度地图 案例

 

 

https://echarts.baidu.com/examples/editor.html?c=map-polygon

https://echarts.baidu.com/examples/editor.html?c=effectScatter-bmap

空气质量等,可以通过值来控制点的大小和光环。

https://echarts.baidu.com/examples/editor.html?c=heatmap-bmap

人流密度图、热力图等

 我的echarts+百度地图

 

左上角可以切换地图和表格,鼠标移动到小点会显示内容,点击小点会跳转到该城市详情页。

 

 

这个是echarts  对一个json地理数据的展示。

https://www.echartsjs.com/download-extension.html

https://echarts.baidu.com/examples/index.html#chart-type-globe

https://echarts.baidu.com/echarts2/doc/example.html

 

转载于:https://www.cnblogs.com/hao-1234-1234/p/10956941.html

ECharts是一款基于JavaScript的开源可视化图表库,而Vue是一套用于构建用户界面的渐进式JavaScript框架。结合使用ECharts和Vue可以创建各种交互式的数据可视化图表。 一个常见的ECharts Vue案例是在Vue项目中使用ECharts来展示特定数据集的柱状图。以下是该案例的简要实现步骤: 1. 安装ECharts:使用npm或yarn命令在Vue项目中安装ECharts。例如,可以执行以下命令来安装ECharts: ``` npm install echarts --save ``` 2. 导入ECharts库:在需要使用ECharts的Vue组件中导入ECharts库。例如,可以在script标签中添加以下代码: ```javascript import echarts from 'echarts' ``` 3. 创建图表容器:在Vue组件中创建一个div元素作为图表的容器。例如,可以在template标签中添加以下代码: ```html <template> <div id="chartContainer"></div> </template> ``` 4. 初始化图表实例:在Vue组件的mounted生命周期钩子函数中通过ECharts初始化图表的实例。例如,可以在script标签中添加以下代码: ```javascript mounted() { const chartContainer = document.getElementById('chartContainer') const chart = echarts.init(chartContainer) } ``` 5. 配置图表选项:通过设置ECharts实例的option属性来配置图表的选项。例如,可以在mounted函数中添加以下代码: ```javascript mounted() { const chartContainer = document.getElementById('chartContainer') const chart = echarts.init(chartContainer) chart.setOption({ xAxis: { type: 'category', data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'] }, yAxis: { type: 'value' }, series: [{ data: [120, 200, 150, 80, 70, 110, 130], type: 'bar' }] }) } ``` 6. 渲染图表:通过调用ECharts实例的render方法将图表渲染到页面中。例如,可以在mounted函数中最后添加以下代码: ```javascript mounted() { const chartContainer = document.getElementById('chartContainer') const chart = echarts.init(chartContainer) chart.setOption({ // 配置图表选项 }) chart.render() } ``` 以上就是一个简单的ECharts Vue案例的实现步骤。通过按照以上步骤,可以在Vue项目中使用ECharts来展示各种类型的可视化图表,包括折线图、饼图、雷达图等。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值