根据echart资源网站复制到自己vue项目中并运行

最新推荐文章于 2024-04-09 16:35:09 发布
最新推荐文章于 2024-04-09 16:35:09 发布
阅读量521 收藏 2
点赞数 1
分类专栏： echart 文章标签： vue.js echarts javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_39132795/article/details/127108677
版权

根据echarts资源网站复制到自己vue项目中并运行
echarts资源网站地址：echart
本次使用的echarts实例地址 ： [2020年云梦山游客来源山东省统计](https://www.isqqw.com/add?from=20844
效果图：
在这里插入图片描述

资源源码

		var name_title = "2020年云梦山游客来源山东省统计"
		var subname = '数据来自奇镜科技'
		var nameColor = " rgb(55, 75, 113)"
		var name_fontFamily = '等线'
		var subname_fontSize = 15
		var name_fontSize = 18
		var uploadedDataURL = "/asset/get/s/data-1482909892121-BJ3auk-Se.json";
		var nameMap = '山东省';
		window.dataList = [{
		        name: "济南市",
		        value: 60
		    },
		    {
		        name: "聊城市",
		        value: 37
		    },
		    {
		        name: "德州市",
		        value: 23
		    },
		    {
		        name: "滨州市",
		        value: 6
		    },
		    {
		        name: "东营市",
		        value: 2
		    },
		    {
		        name: "威海市",
		        value: 1
		    },
		    {
		        name: "烟台市",
		        value: 1
		    },
		    {
		        name: "泰安市",
		        value: 1
		    },
		    {
		        name: "临沂市",
		        value: 1
		    },
		    {
		        name: "济宁市",
		        value: 1
		    },
		];
		var toolTipData = [{
		        name: "济南市",
		        value: 60
		    },
		    {
		        name: "聊城市",
		        value: 37
		    },
		    {
		        name: "德州市",
		        value: 23
		    },
		    {
		        name: "滨州市",
		        value: 6
		    },
		    {
		        name: "东营市",
		        value: 2
		    },
		    {
		        name: "威海市",
		        value: 1
		    },
		    {
		        name: "烟台市",
		        value: 1
		    },
		    {
		        name: "泰安市",
		        value: 1
		    },
		    {
		        name: "临沂市",
		        value: 1
		    },
		    {
		        name: "济宁市",
		        value: 1
		    },
		];
		var geoCoordMap = {};
		var max = 2000,
		    min = 1; // todo 
		var maxSize4Pin = 100,
		    minSize4Pin = 40;
		var convertData = function(data) {
		    console.log('data', data)
		    var res = [];
		    for (var i = 0; i < data.length; i++) {
		        var geoCoord = geoCoordMap[data[i].name];
		        if (geoCoord) {
		            res.push({
		                name: data[i].name,
		                value: geoCoord.concat(data[i].value),
		            });
		        }
		    }
		    console.log('res', res)
		    return res;
		};


		$.get(uploadedDataURL, function(gdMap) {
		    echarts.registerMap(nameMap, gdMap);
		    /*获取地图数据*/
		    myChart.showLoading();
		    var mapFeatures = echarts.getMap(nameMap).geoJson.features;
		    myChart.hideLoading();
		    mapFeatures.forEach(function(v) {
		        // 地区名称
		        var name = v.properties.name;
		        // 地区经纬度
		        geoCoordMap[name] = v.properties.cp;

		    });
		    console.log(geoCoordMap)
		    //GDP
		    var optionMap = {
		        title: {
		            text: name_title,
		            subtext: subname,
		            x: 'center',
		            textStyle: {
		                color: nameColor,
		                fontFamily: name_fontFamily,
		                fontSize: name_fontSize
		            },
		            subtextStyle: {
		                fontSize: subname_fontSize,
		                fontFamily: name_fontFamily
		            }
		        },
		        backgroundColor: "#fff",
		        grid: {
		            // left:'2%',
		            right: '10%',
		            bottom: '3%',
		            width: '20%',
		            height: '50%'
		        },
		        tooltip: {

		            formatter: function(params) {
		                if (typeof(params.value)[2] == "undefined") {
		                    var toolTiphtml = ''
		                    for (var i = 0; i < toolTipData.length; i++) {
		                        if (params.name == toolTipData[i].name) {
		                            toolTiphtml += toolTipData[i].name + ':' + toolTipData[i].value + '人'
		                        }
		                    }
		                    return toolTiphtml;
		                } else {
		                    var toolTiphtml = ''
		                    for (var i = 0; i < toolTipData.length; i++) {
		                        if (params.name == toolTipData[i].name) {
		                            toolTiphtml += toolTipData[i].name + ':' + toolTipData[i].value + '人'
		                        }
		                    }
		                    return toolTiphtml;
		                }
		            }
		        },
		       
		        visualMap: [
					{
		                show: false,
		                min: 1,
		                max: 1000,
		                left: 'left',
		                top: 'bottom',
		                text: ['高', '低'], // 文本，默认为数值文本
		                calculable: true,
		                seriesIndex: [0],
		                inRange: {
		                    color: ['#74add1', '#ffd768', '#ff8c71', '#ff5428', '#7f1100']

		                },
		            },
		            {
		                show: false,
		                min: 1,
		                max: 1000,
		                left: 'left',
		                top: 'bottom',
		                text: ['高', '低'], // 文本，默认为数值文本
		                calculable: true,
		                seriesIndex: [1],
		                inRange: {
		                    color: ['#0b9df0', '#74add1', '#ffd768', '#ff8c71', '#ff5428', '#7f1100']

		                },
		            }
		        ],
		        toolbox: {
		            show: true,
		            orient: 'vertical',
		            left: 'right',
		            top: 'center',
		            feature: {
		                saveAsImage: {}
		            }
		        },
		        geo: {
		            show: true,
		            map: nameMap,
		            label: {
		                normal: {
		                    show: true
		                },
		                emphasis: {
		                    show: false,
		                }
		            },
		            roam: true,
		            itemStyle: {
		                normal: {
		                    areaColor: '#ffffff',
		                    borderColor: '#3B5077',
		                },
		                emphasis: {
		                    areaColor: '#2B91B7',
		                }
		            }
		        },
		        series: [{
		                name: "十一游客来源",
		                type: 'map',
		                map: nameMap,
		                // aspectScale: 0.75, //长宽比
		                // left: '2%',
		                // // right: '35%',
		                // top: 10,
		                // width: '90%',
		                // height: '90%',
		                roam: false,
		                // itemStyle: {
		                //     normal: {
		                //         areaColor: '#fff',
		                //         borderColor: '#00effc',
		                //         borderWidth: 1.5,
		                //         label: {
		                //             show: true,
		                //             color: '#fff',
		                //         },

		                //         emphasis: {
		                //             label: {
		                //                 show: true
		                //             }
		                //         }
		                //     }
		                // },
		                geoIndex: 0,
		                data: window.dataList
		            },
		            {
		                name: '点',
		                type: 'scatter',
		                coordinateSystem: 'geo',
		                symbol: 'pin', //气泡
		                symbolSize: function(val) {
		                    var a = (maxSize4Pin - minSize4Pin) / (max - min);
		                    var b = minSize4Pin - a * min;
		                    b = maxSize4Pin - a * max;
		                    // return  val[2] ;
		                    return a * val[2] + b;
		                },
		                label: {
		                    normal: {
		                        formatter: function(obj) {
		                            return obj.data.value[2];
		                        },
		                        show: true,
		                        textStyle: {
		                            color: '#fff',
		                            fontSize: 9,
		                        }
		                    }
		                },
		                itemStyle: {
		                    normal: {
		                        color: '#F62157', //标志颜色
		                    }
		                },
		                zlevel: 6,
		                data: convertData(window.dataList),
		            },
		        ]

		    };
		    myChart.setOption(optionMap, true);
		});

获取json数据

var uploadedDataURL = "/asset/get/s/data-1482909892121-BJ3auk-Se.json";

打开控制台刷新页面
在这里插入图片描述
将json请求中的Respone全部复制放到json中，地址：json
在这里插入图片描述
将转换后的json串复制，在vue中创建json文件，粘贴

在这里插入图片描述
创建接线图文件
代码：

<template>
    <div>
        <div id="myChart" :style="{width: '100%', height: '600px'}"></div>
    </div>
</template>

<script>
    import json from "../../assets/jsss/data-1482909892121-BJ3auk-Se.json";
    import * as echarts from 'echarts'
    let cityCoordinate = [{
        name: "济南市",
        value: 60
    },
        {
            name: "聊城市",
            value: 37
        },
        {
            name: "德州市",
            value: 23
        },
        {
            name: "滨州市",
            value: 6
        },
        {
            name: "东营市",
            value: 2
        },
        {
            name: "威海市",
            value: 1
        },
        {
            name: "烟台市",
            value: 1
        },
        {
            name: "泰安市",
            value: 1
        },
        {
            name: "临沂市",
            value: 1
        },
        {
            name: "济宁市",
            value: 1
        },
    ];
    export default {
        name: "someCharts1",
        data() {
            return {
                msg: "Welcome to Your Vue.js App",

            };
        },
        mounted() {
            // this.$nextTick(()=>{
            //     this.drawLine()
            // })
            this.selectCityMessage();
        },
        methods: {
            //项目统计
            selectCityMessage() {
                this.$axios.post("StatisticAnalysis/selectCityMessage")
                    .then(result => {
                        this.list = result.data.data;
                        // let arr = []
                        // for (let i = 0; i < cityCoordinate.length; i++) {
                        //     for (let j = 0; j < this.list.length; j++) {
                        //         if (cityCoordinate[i].name == this.list[j].name) {
                        //             cityCoordinate[i].connected = this.list[j].connected;
                        //             cityCoordinate[i].unaccessed = this.list[j].unaccessed;
                        //             arr.push(cityCoordinate[i])
                        //         }
                        //     }
                        // }
                        this.$nextTick(() => {
                            this.drawLine(this.list)
                        })
                    })
            },
            drawLine(arr) {
                console.log(arr);
                var myChart = this.$echarts.init(document.getElementById("myChart"));
                var nameColor = " rgb(55, 75, 113)"
                var name_fontFamily = '等线'
                var subname_fontSize = 15
                var name_fontSize = 18
                var nameMap = '山东省';
                var geoCoordMap = {};
                var max = 2000,
                    min = 1; // todo
                var maxSize4Pin = 100,
                    minSize4Pin = 40;
                var convertData = function (data) {
                    console.log('data', data)
                    var res = [];
                    for (var i = 0; i < data.length; i++) {
                        var geoCoord = geoCoordMap[data[i].name];
                        if (geoCoord) {
                            res.push({
                                name: data[i].name,
                                value: geoCoord.concat(data[i].value),
                            });
                        }
                    }
                    console.log('res', res)
                    return res;
                };
                myChart.setOption({})
                echarts.registerMap(nameMap, json);
                /*获取地图数据*/
                myChart.showLoading();
                var mapFeatures = echarts.getMap(nameMap).geoJson.features;
                myChart.hideLoading();
                mapFeatures.forEach(function (v) {
                    // 地区名称
                    var name = v.properties.name;
                    // 地区经纬度
                    geoCoordMap[name] = v.properties.cp;

                });
                console.log(geoCoordMap)
                //GDP
                var optionMap = {
                    title: {
                        x: 'center',
                        textStyle: {
                            color: nameColor,
                            fontFamily: name_fontFamily,
                            fontSize: name_fontSize
                        },
                        subtextStyle: {
                            fontSize: subname_fontSize,
                            fontFamily: name_fontFamily
                        }
                    },
                    backgroundColor: "#020a0f",
                    grid: {
                        // left:'2%',
                        right: '10%',
                        bottom: '3%',
                        width: '20%',
                        height: '50%'
                    },
                    tooltip: {
                        formatter: function (params) {
                            var toolTiphtml = ''
                            for (var i = 0; i < arr.length; i++) {
                                if (params.name == arr[i].name) {
                                    toolTiphtml += '已接入:' + arr[i].connected+ '<br />' + '未接入:' + arr[i].unaccessed
                                }
                            }
                            return toolTiphtml;
                        }
                    },
                    visualMap: [
                        {
                        show: false,
                        min: 1,
                        max: 1000,
                        left: 'left',
                        top: 'bottom',
                        text: ['高', '低'], // 文本，默认为数值文本
                        calculable: true,
                        seriesIndex: [0],
                        inRange: {
                            color: ['#74add1', '#ffd768', '#ff8c71', '#ff5428', '#7f1100']

                        },
                    },
                        {
                            show: false,
                            min: 1,
                            max: 1000,
                            left: 'left',
                            top: 'bottom',
                            text: ['高', '低'], // 文本，默认为数值文本
                            calculable: true,
                            seriesIndex: [1],
                            inRange: {
                                color: ['#0b9df0', '#74add1', '#ffd768', '#ff8c71', '#ff5428', '#7f1100']

                            },
                        }
                    ],
                    toolbox: {
                        show: true,
                        orient: 'vertical',
                        left: 'right',
                        top: 'center',
                        feature: {
                            saveAsImage: {}
                        }
                    },
                    geo: {
                        show: true,
                        map: nameMap,
                        label: {
                            normal: {
                                show: true
                            },
                            emphasis: {
                                show: false,
                            }
                        },
                        roam: true,
                        itemStyle: {
                            normal: {
                                areaColor: '#ffffff',
                                borderColor: '#3B5077',
                            },
                            emphasis: {
                                areaColor: '#2B91B7',
                            }
                        }
                    },
                    series: [{
                        type: 'map',
                        map: nameMap,
                        roam: false,
                        geoIndex: 0,
                        data: arr
                    },
                        {
                            name: '点',
                            type: 'scatter',
                            coordinateSystem: 'geo',
                            symbol: 'pin', //气泡
                            symbolSize: function (val) {
                                var a = (maxSize4Pin - minSize4Pin) / (max - min);
                                var b = minSize4Pin - a * min;
                                b = maxSize4Pin - a * max;
                                // return  val[2] ;
                                return a * val[2] + b;
                            },
                            label: {
                                normal: {
                                    formatter: function (obj) {
                                        return obj.data.value[2];
                                    },
                                    show: true,
                                    textStyle: {
                                        color: '#fff',
                                        fontSize: 9,
                                    }
                                }
                            },
                            itemStyle: {
                                normal: {
                                    color: '#F62157', //标志颜色
                                }
                            },
                            zlevel: 6,
                            data: convertData(arr),
                        },
                    ]

                };
                myChart.setOption(optionMap, true);
            }
        }
    };
</script>

<style>
</style>

注意：
$.get(uploadedDataURL, function(gdMap) 删除
echarts.registerMap(nameMap, gdMap); 中gdmap替换为json
完结撒花

代码不听话
关注
  • 1
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Echarts 系列之复制粘贴大法
weixin_33882443的博客
12-18 3095
Echarts 系列之复制粘贴大法 最近在耍 Echarts 稍微有点小经验，写(熬)篇文章记录一下下~ 话不多说，直接开始(开始复制粘贴) hhhhh~~ 开发中也有找类似的图表直接修改 附上链接 官方链接 &gt; 社区-GALLERY 仓库地址 预览地址 文章地址 饼图 Doughnut Chart 链接 官方给出了 demo 其实也还挺好看的，只是不适合直接放在业务里面...
echarts关系图（超级简单：直接复制粘贴官网使用）
jyq9222的博客
05-07 1550
//直接复制粘贴到官网实例中，可以调试成自己想要的效果 var graph = { //这是数据项目中一般都是获取到的 nodes: [ { "id": "0", "name": "昆山XX设计有限公司", "attributes": { "modularity_class": 0 }}, ...
Vue+Echarts
weixin_45866188的博客
07-14 922
Vue+Echarts
复制粘贴即可使用! react封装echart图表基础组件
WarrenLee的博客
03-13 306
getOption(chart1)对应的option只要复制echart你需要的示例option即可。
echarts（百度）相关资源网站
热门推荐
weixin_44647865的博客
03-09 3万+
echarts（百度）主题自定义网站 https://echarts.apache.org/zh/theme-builder.html echarts官方文档网站 https://echarts.apache.org/zh/index.html echarts B站数据可视化学习网站 https://www.bilibili.com/video/BV1Uz4y1S7kr?t=259&p=29 ...
在Vue项目中 使用vue-clipboard2 实现复制到粘贴板的功能
01-07
然后，在vue 项目中的 main.js 中引入 import Vue from 'vue' import VueClipboard from 'vue-clipboard2' // 引入 Vue.use(VueClipboard) // vue全局使用插件 在具体页面使用，使用方法有两种： 其一： {{...
echart+element+vue搭建CDN项目
01-18
至于CDN的实现，通常我们会将项目中的静态资源（如CSS、JavaScript文件）上传到CDN服务，这样用户访问时可以从最近的CDN节点获取，降低延迟。这里，我们已经为ECharts和Element UI添加了CDN链接。对于项目自身的静态...
使用IDEA工具配置和运行vue项目及遇到的坑
08-26
我们需要cd到项目目录中去，然后输入cnpm install命令来安装依赖资源。 七、运行项目 在安装完成依赖资源后，我们可以使用npm run dev命令来运行项目。该命令会用热加载的方式运行我们的应用，让我们在修改完代码...
详解如何运行vue项目
10-17
主要介绍了如何运行vue项目，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
第三节Vue项目-创建项目并运行
09-23
第三节Vue项目-创建项目并运行
vue项目中实现echarts的toolbox自定义一键复制功能，自定义icon-----附详解
wzy_PROTEIN的博客
01-05 1833
实现echarts图表内数据的一键复制功能
【echarts】常用的echarts网站汇总
最新发布
qq_45852108的博客
04-09 2334
常用的echarts网站汇总 一、PPChart 网址： http://ppchart.com/ 二、Make A Pie 网址： https://madeapie.com/ 三、Isqqw 网址：https://www.isqqw.com/ 四、echarts官网 网址：https://echarts.apache.org/examples/zh/index.html#chart-type-bar
echarts图表 vue使用方法
逆风优雅的博客
05-10 923
在vue项目中使用echarts，可以通过声明一个类的方式进行。 1. 首先使用npm 下载 echarts依赖。 2. 声明一个类（echarts公共的类）：此处文件名是commion.js代码如下： 此代码可以直接复制使用： import * as echarts from "echarts"; // 引入echarts文件 import "echarts-liquidfill/src/liquidFill.js";// ecahrts的水球 //（因为一些特别的图表，比如水球，需要下载特别的
echarts添加地图散点
SongZhengxing_的博客
12-03 4729
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>地图下钻</title> <style> body { m.
Echarts——中国地图绘制
heal_l的博客
01-13 1万+
首先准备中国城市分布Geo数据 china.jsonhttps://download.csdn.net/download/heal_l/75671467https://download.csdn.net/download/heal_l/75671467
Echarts 在 Vue 中的最佳实践
xxxzzzqqq_的博客
03-11 1619
props: {},id: {},width: {},height: {},option: {},},data() {return {},watch: {option() {},},},if (!return;},methods: {},},
echarts案例大全，echarts的Demo网站有哪些
coldriversnow的专栏
02-01 9030
但是这个一个网站的demo不一定满足我们，那么除了Apache　Echarts还有哪些我们可以用的echarts网站呢？很多开发人员用到echarts做大屏展示，一般常用的网站是。6.Echarts官方案例。4.ECHARTS社区。7.仿Echarts。
Vue框架学习3：echarts导入
L_Jane_H的博客
11-26 1943
Vue框架学习3：echarts导入
关于vue项目中的echrts需要以HTML文件的格式导出
kevin_zwq的博客
07-29 1099
项目需求要有导出echrts的功能，原本以为只是用echrts自带的那个toolbox里面的导出就行了，结果看了下效果，不尽人意，那个导出只是截图当前视图的png格式，要是数据没标点在统计图上的话，只能看个模糊的大概，有滚动条的话也截不全数据。所以只能各种资源搜索去解决，不过网上好像没有特别全的攻略，都是导出excel，或者pdf格式的居多。可以在上面字符串模板的js里面引入个CDN，如下图，这样导出来的html文件在外网也能查看。这个是字符串模板的代码，可以放在utils下，如图。...
vue项目复制到另外一个电脑运行报错
05-01
当你将Vue项目从一个电脑复制到另一个电脑时，可能会遇到这样或那样的问题。其中之一是运行项目时出错。有几个可能的原因和解决方法： 1. 环境不匹配。如果两台电脑的环境不完全相同，例如版本，配置或插件，那么你可能会看到一些错误。确保两台电脑的环境是相同的。 2. 缺少依赖项。如果你的项目使用了一些依赖项，并且这些依赖项没有复制到新电脑上，那么你会遇到问题。确保所有的依赖项都已复制。 3. 路径错误。如果你使用了相对路径，并且在新电脑上的文件结构与旧电脑不同，那么你的应用程序可能会崩溃。确保所有路径都是正确的。 4. 端口问题。如果你使用的是固定端口，而该端口被占用，那么你的Vue应用程序将无法启动。确保你的端口是可用的。 最后，使用npm install和npm run serve命令，在一个控制台中以管理员身份运行这些命令，可以解决一些问题。如果你还是遇到了问题，可以尝试重新安装Vue CLI。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值