vue中引入echarts 报错“export ‘default‘ (imported as ‘echarts‘) was not found in ‘echarts‘问题先查看package.json中的echart版本号是否是"echarts": "^4.9.0",如果不是先通过 npm uninstall echart 卸载插件，而后通过yarn add echarts@4.9.0或者npm install echarts@4.9.0 装置插件，最初运行npm run serve 或者yarn serve从新运行我的项目。
最近在项目中使用ECharts时遇见了许多问题，在这里做个记录 在Vue中使用geo时不显示地图在Vue中使用geo时不显示地图，数据都堆叠在一起，如下图所示： 后查找发现是未引入地图数据，需要在Vue文件中引入地图JSON数据，关键代码如下： import echarts from 'echarts';import china from 'echarts/map/json/china.json';echarts.registerMap('china', china);如果是使用TypeScript，需要在tsconfig.json中加入 "resolveJsonModule": true，否则在引入json数据的时候编辑器会提示报错 error TS2732: Cannot find module 'echarts/map/json/china.json'. Consider using '--resolveJsonModule' to import module with '.json' extension 不显示南海诸岛在使用地图时，大部分情况下南海诸岛都没有数据，这时我们可以控制南海诸岛的隐藏 geo: { map: 'china', regions: [ { name: '南海诸岛', value: 0, itemStyle: { normal: { opacity: 0, label: { show: false } } } } ], label: { emphasis: { show: false } }, itemStyle: { normal: { areaColor: '#323c48', borderColor: '#111' }, emphasis: { areaColor: '#2a333d' } }}
Online开发——初体验（在线配置图表） 01 JSON数据格式演示.gif02 SQL-统计用户登录数量.gif03 图表合并展示.gif04 展示模板风格演示.gif
咔咔出行（出行可视化）项目简介解决出行问题，用于出行行程记录，路线规划，数据可视化分析的移动端webapp 点击这里查看该项目 项目截图私人出行公共交通历史列表我的信息 技术栈前端：移动端，vue全家桶，Mand组件库，Echarts.js，Scss后端：Node，Express框架，高德地图API数据库：Mysql功能模块个人出行用户个人出行，不确定路程、目的地等信息，选择出行工具，点击开始，系统实时监听用户手机位置得到WGS84经纬度坐标（w3c HTML5 Geolocation地理定位标准），行程结束，记录本次出行信息，经纬度坐标转换GCJ-02坐标体系，通过高德地图提供三方API绘制出行轨迹。 公共交通用户确定出发地、目的地、交通工具，选择公共交通出行，用户输入位置关键字，选择合适出发/目的位置，选择乘坐交通工具，规划出行路线，选择某一条路线，确定后点击保存上传本次出行记录 历史列表按时间顺序查看所有出行的历史记录，可查看出行的详情信息、行程轨迹、路线规划 我的信息（未完成）查看我的详情信息，通过出行数据分析得到的出行趋势折线图，与出行数据相关的数据分析图表，其他功能未写 项目构建前端前端在vue-cli3基础上开发，在此之上根据项目需求对项目工程作出几点修改，前端代码在view/文件夹中 移动端适配：之前做移动端开发一直使用手淘的分辨率适配方案，本项目根据大漠的《如何在Vue项目中使用vw实现移动端适配》，对移动端分辨率用webpack在工程中配置。请求拦截器：在view/src/request/中，基于axios提供的interceptors对所有ajax的请求和响应添加相应操作，如请求头添加，token添加，响应后台错误状态码的识别与报错；简单封装了下axios请求，主要为get，post两种。导航守卫：在view/src/router/中，做了全局导航守卫，未登录用户只能访问项目登录页面。工具类：在view/src/utils/中，对常用枚举值、全局组件注册、常用类封装等功能做模块化封装。css样式：在view/src/style/中，全局公共样式，初始化样式。svg组件：在view/src/icons/中，封装用于svg展示组件，用做小icon的展示，svg保存该文件夹中。模块化：对路由与vuex做模块化封装。地图：所有地图、地理信息、轨迹、路线规划功能有高德地图第三方API提供后端使用Node的express框架，连接Mysql数据库，做数据接口开发，数据的增删改查与简单封装。小结项目简结难度：简单开发时长：前期调研，编码一周关键字：移动端，出行，可视化，高德地图，Echart图表过程总结想法产出：因为在滴滴出行的实习经历，准备做款有关出行平台的，有关前端可视化的产品。需求调研：结合出行 可视化 关键字做需求分析，调研悦动圈、悦跑圈、滴滴出行、百度地图、高德地图确定几个主要功能 实时定位，绘制出行轨迹(悦跑圈，已完成)路线规划，规划路线绘制路径图(百度地图，已完成)网约车，快车，专车，顺风车在线叫车(滴滴出行，未完成)可视化分析，出行数据的可视化分析(已完成)技术调研： 选取HTML5 Geolocation提供的物理位置实时监听功能，获取到WGS84经纬坐标选取高德地图第三方API提供地图，地理位置，轨迹绘制，路线规划等功能选择开发移动端项目，用滴滴的Mand作为移动端UI组件库选取Node为服务端，Express为后端框架，Mysql为数据库难点总结产品从无到有是最困难的，项目虽然不难，可前期产品调研，技术调研，项目构建确花费了大量时间，相比照着成品写多了很多不一样的体验 Github源码 https://github.com/wwenj/tripRecord
第一次使用mpvue框架来写小程序，项目开发直接搬用mpvue-shop（一个仿网易严选的小程序开发项目）,项目结构清楚,实现了大部分功能，对于初次使用mpvue的小伙伴们来说，是一个很好的选择。关于组件的选择：1.echarts-for-weixin,官方echarts的小程序版本。使用参考：echarts-for-weixin介绍，如果你是原生开发小程序版本，这个组件非常适合你，开发过程中可使用echarts官方提供的所有配置和Api,但并不适合mpvue项目。 2、wx-charts,一个个人开发的微信小程序图表插件，体积只有30K,可用于mpvue项目和原生小程序项目,支持大部分图表绘制，缺点是可配置化不强，对于UI没有太大要求的可使用此组件，比较适合于个人项目开发。 3、mpvue-echarts与echarts结合。特别适合mpvue项目,mpvue-echarts是一个基于mpvue开发的echarts组件，echarts的加入可完全使用官方所有的图表绘制功能，让echarts在小程序当中得到全部应用。 mpvue-echarts配合echarts的使用下载相关包 npm install mpvue-echarts --save echarts的下载可到官网上下载，由于小程序中对文件大小有限制，建议通过勾选所需要的功能按需下载。 vue文件中使用 template: <mpvue-echarts :echarts="echarts" :onInit="initChart" canvasId="demo-canvas" /> js: import mpvueEcharts from 'mpvue-echarts';let echarts = require("../../../static/lib/echarts.min.js"); //按需下载的压缩文件放在项目文件夹中import charts from './charts'; //本地mixin文件,图表的所有配置let chart = null;export default { data() { return { echarts, }; }, async mounted() { let data = await post("/product/marketInfo",{ }); this.initCombineLineData(data.trendData); chart.setOption(this.trendChart); }, mixins: [charts], methods: { initChart(canvas, width, height) { chart = echarts.init(canvas, null, { width: width, height: height }); canvas.setChart(chart); chart.setOption(this.trendChart); return chart; } }, components: { mpvueEcharts }}charts.js文件 ...