liudachu的博客

单独组件开发：数据可视化项目—售票员业绩排行数据可视化项目—客源分析趋势图数据可视化项目—客源分布图数据可视化项目—地区销量排行数据可视化项目—订单分类占比图数据可视化项目—车辆实时信息图在完成单独组件开发之后，进行项目的最后一个步骤：合并组件、添加全屏功能、主题切换功能最终效果如下组件完整代码ScreenPage.vue<template> <div class="screen-container" :style="containerStyle">

效果如下实时车辆信息图—组件代码<!--客源地图分布--><template> <div class="com-container"> <div class="com-chart" ref="stock_ref"></div> </div></template><script> export default { name: "Stock",

效果如下订单分类占比图—组件代码<!--客源地图分布--><template> <div class="com-container"> <div class="com-chart" ref="hot_ref"></div> <span class="iconfont arr-left" @click="toLeft" :style="comStyle">&#xe6ef;</s

最终效果如下点击省份之后，如点击四川：客源分布图—组件代码<!--客源地图分布--><template> <div class="com-container" @dblclick="revertMap"> <div class="com-chart" ref="map_ref"></div> </div></template><script> import

最终效果如下客源分析趋势图—组件代码<!--客源地图分布--><template> <div class="com-container"> <div class="com-chart" ref="rank_ref"></div> </div></template><script> export default { name: "Rank",

最终效果如下：客源分析趋势图—组件代码<template> <div class="com-container"> <div class="title" :style="comStyle"> <span>┃ {{ showTitle }}</span> <span class="iconfont title-icon" @click="showChoice = !s

在数据可视化项目的初期, 我们会每个图表单独的进行开发, 最后再将所有的图表合并到一个界面中.本项目中使用的ehcarts图表官网售票员业绩排行最终的效果如下图所示:1.组件结构设计在 src/components/ 目录下建立 Seller.vue , 这个组件是真实展示图表的组件给外层div增加类样式 com-container建立一个显示图表的div元素给新增的这个div增加类样式 com-chart<!-- 显示商家销量统计的图表 --> <te.

npm 安装 ECharts你可以使用如下命令通过 npm 安装 EChartsnpm install echarts --save挂载到 Vue 原型上在 src/main.js 文件中挂载，将其挂载到 Vue 的原型对象上import * as echarts from 'echarts';// 将全局echarts对象挂载到Vue的原型对象上 Vue.prototype.echarts = echarts使用全局 echarts 对象在其他组件中使用this.echa