![](https://img-blog.csdnimg.cn/20201014180756757.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
echarts
每天发布一篇原创
精通前端和可视化
展开
-
分享一套可视化
首先看一下效果:首页1.边框动画 使用的是Datavhttp://datav.jiaminghi.com/guide/borderBox.html#dv-border-box-8 使用请走按需引入http://datav.jiaminghi.com/guide/#%E6%8C%89%E9%9C%80%E5%BC%95%E5%85%A5内容页数字滚动插件 vue-count-to新闻列表滚动 vue-seamless-scroll弹窗动画效果 请看我上一篇文章用的echarts大屏自适原创 2021-10-13 16:49:34 · 182 阅读 · 0 评论 -
百万级可视化开发进阶笔记——v-chart组件的使用
效果图TotalUser index.vue<template> <common-card title="累计用户数" value="1,056,355" > <template> <div id="total-user-chart" :style="{width:'100%',height:'100%'}"></div> </template> <template v-s原创 2021-05-15 14:56:49 · 328 阅读 · 0 评论 -
百万级可视化开发进阶笔记———今日交易用户数
效果图:TodayUser下 index.vue<template> <common-card title="今日交易用户数" value="62,832" > <template> <div id="today-user-chart" :style="{width:'100%',height:'100%'}"></div> </template> <template原创 2021-05-15 14:21:36 · 101 阅读 · 0 评论 -
百万级可视化开发进阶笔记——累计订单量
效果图TotalOrders index.vue<template> <common-card title="累计订单量" value="2,119,762" > <template> <div id="total-orders-chart" :style="{width:'100%',height:'100%'}"></div> </template> <template原创 2021-05-15 13:52:58 · 118 阅读 · 0 评论 -
百万级可视化开发进阶笔记——累计销售
效果截图TotalOrders下index.vue<template> <common-card title="累计销售" value="¥ 32,039,165" > <template> <div class="compare-wrapper"> <div class="compare"> <span>日同比</span>原创 2021-05-15 09:10:09 · 95 阅读 · 0 评论 -
百万级可视化开发进阶笔记——顶部核心组件开发
用到element ui中的TopView下index.vue代码:<template><div class="top-view"> <el-row :gutter="20"> <el-col :span="6"> <el-card shadow="hover"> 鼠标悬浮时显示 </el-card> </el-col> <el-col :原创 2021-05-14 15:59:20 · 115 阅读 · 0 评论 -
百万级可视化开发进阶笔记——容器组件初始化
home.vue<template> <div class="home"> <top-view></top-view> <sales-view></sales-view> <map-view></map-view> <bottom-view></bottom-view> </div></template><scr原创 2021-05-14 14:41:28 · 88 阅读 · 0 评论 -
百万级可视化开发进阶笔记——element ui和echarts的引入
安装elementelement 官网:https://element.eleme.cn/#/zh-CN/component/installationnpm i element-ui -S修改main.jsimport Vue from 'vue'import ElementUI from 'element-ui'import 'element-ui/lib/theme-chalk/index.css'import App from './App.vue'import route原创 2021-05-14 14:21:14 · 575 阅读 · 3 评论 -
百万级可视化开发进阶笔记——项目初始化
1.创建项目vue create imooc-datav-report-dev配置如下:2.启动项目:cd imooc-datav-report-devnpm run serve3.修改部分文件components下的文件都删除了views就保留一个home.vue首先看一下router.jsimport Vue from 'vue'import Router from 'vue-router'import Home from './views/Home.vue'Vue.原创 2021-05-14 13:51:20 · 107 阅读 · 0 评论 -
element tabs里面放ehcharts的一些bug问题解决
1.常见问题就是切换渲染的问题在切换事件中放这个this.$nextTick(() => { 这里调用方法 })2.切换窗口大小不更新 let fund = echarts.init(document.getElementById(ecid)); fund.resize()3.切换事件重叠切换的时候会发现好几个click事件一起调用了。在执行click先清除之前的click事件let resource = echarts.init(document.get原创 2021-03-25 14:00:47 · 189 阅读 · 0 评论 -
分享几个echarts复杂结构和图例字体中数字显示不同颜色
先看几个效果图:function labor_security(labor,ecid="labor_security",font_size) { let labor_security = echarts.init(document.getElementById(ecid)); /*清除画布*/ labor_security.clear(); let Data=[] ,zd_num1=[],zd_num2=[],zd_num3=[],zd_num4=[],ja_num1原创 2020-12-31 11:23:25 · 758 阅读 · 0 评论 -
echarts 表格实现统计和导出表格的功能
首先看下效果图大概实现的功能是数量统计和一个导出Excel表格的功能用到是echarts toolbox这个属性本来想带大家看看官网关于这个属性的介绍,最近官网换链接 有时候就打不开 toolbox: { show: true, feature: { dataView: { show: true, readOnly: false,原创 2020-12-31 10:34:19 · 1326 阅读 · 0 评论 -
echarts 排序有高到低
后台给的结构是部分 总之就是一堆很杂乱的数据为了让图片比较好看,我们给排下序 var res = []; for (j = 0; j < adoption.length; j++) { res.push({ name: adoption[j].cy, value: adoption[j].num, title:adoption[j].title }); // conso原创 2020-12-31 10:12:19 · 2625 阅读 · 0 评论