ECharts
enchantedovo
这个作者很懒,什么都没留下…
展开
-
echarts两图联动(点击地图的点,另一个地图相应高亮)
项目要求左右两张地图能够在鼠标悬浮的时候高亮部分联动一、思路如下:鼠标移入地图时,另一侧的地图根据鼠标悬浮获取到的区域name使该区域高亮;鼠标移入地图时,根据鼠标在地图的坐标位置,使另一侧的地图tooltip悬浮于获取的坐标位置,保证两张地图的tooltip的位置相同。二、遇见的坑使用dispatchAction引发showTip,会发现tooltip只能显示很短的时间,所以我鼠标移入地图时,给另一个地图设置tooltip[0].alwaysShowContent=true和tool.转载 2020-07-17 18:25:52 · 1889 阅读 · 1 评论 -
ECharts可视化大屏学习笔记【6】(地图)
最后一点点扩展啦 如题所见 本章节讲的是地图啦最后效果先看看嗷:(其实后面那个圆是可以动的!笔记【1】写了具体实现)一、Echarts社区介绍社区就是一些,活跃的echart使用者,交流和贡献定制好的图表的地方。在这里可以找到一些基于echart的高度定制好的图表,相当于基于jquery开发的插件,这里是基于echarts开发的第三方的图表。二、Echarts-map使用(扩展)参考社区的例子:https://gallery.echartsjs.com/editor.html?c.原创 2020-07-11 00:05:44 · 1443 阅读 · 0 评论 -
ECharts可视化大屏学习笔记【5】(饼图)
本章介绍饼图,很简单的啦,所以直接上代码一、饼图11.代码// 饼形图1(function() { // 1. 实例化对象 var myChart = echarts.init(document.querySelector(".pie .chart")); // 2.指定配置 var option = { color: ["#065aab", "#066eab", "#0682ab", "#0696ab", "#06a0ab"], tooltip: { .原创 2020-07-10 23:58:11 · 1401 阅读 · 0 评论 -
ECharts可视化大屏学习笔记【4】(折线图)
本章节记录折线图写法一、折线图11.学习点grid配置(网格样式)legend配置(图例)x轴、y轴的定制:刻度+坐标轴线+轴标签+轴内间距+分割线两条线修饰为圆滑(series 中添加 smooth 为 true)数据交互(模拟了json数据)2.详细步骤找一个模板(后面一个也是基于这个修改的):需求1: 修改折线图大小,显示边框设置颜色:#012f4a,并且显示刻度标签。 // 设置网格样式 grid: { top: '20%', .原创 2020-07-10 23:47:41 · 1022 阅读 · 0 评论 -
ECharts可视化大屏学习笔记【3】(柱状图)
本章节将详细介绍Echarts图标的绘制两大步骤:官网找到类似实例, 适当分析,并且引入到HTML页面中根据需求定制图表一、柱状图图表11. 引入到html页面中// 柱状图1模块(function() { // 实例化对象 let myChart = echarts.init(document.querySelector(".bar .chart")); // 指定配置和数据 let option = { color: ["#3398DB"], to.原创 2020-07-10 23:26:28 · 1176 阅读 · 0 评论 -
ECharts可视化大屏学习笔记【2】(ECharts基本使用)
本节讲述项目中可视化图表(ECharts)的基本使用一、初识ECharts(代码与本项目无关)官方教程:[五分钟上手ECharts](https://www.echartsjs.com/zh/tutorial.html#5 分钟上手 ECharts)下载echarts https://github.com/apache/incubator-echarts/tree/4.5.01.使用步骤(五部曲):引入echarts 插件文件到html页面中准备一个具备大小的DOM容器<d.原创 2020-07-10 22:54:45 · 337 阅读 · 0 评论 -
ECharts可视化大屏学习笔记【1】(整个结构布局搭建)
一、基本效果原创 2020-07-09 19:04:17 · 1996 阅读 · 0 评论 -
Vue使用Echarts代码布局笔记
一、引入ECharts支持webpack引入,图省事可以将ECharts整个引入var echarts = require(‘echarts’);不过ECharts还是不小的,我们大部分情况只是用到很少一部分功能,因此可以选择按需引入的。// 引入 ECharts 主模块var echarts = require('echarts/lib/echarts');// 引入柱状图require('echarts/lib/chart/bar');// 引入提示框和标题组件require('echar转载 2020-07-08 16:01:35 · 344 阅读 · 0 评论 -
Vue中使用ECharts步骤
一、图形化界面创建vue项目1.启动图形化界面vue ui2.配置项目的信息使用预设配置3.安装依赖PS:开发依赖:devDependencies(在线上状态不需要使用的依赖,就是开发依赖)运行依赖:dependencies(这是 npm 最基本的依赖,通过命令 npm i xxx -S 或者 npm i xxx --save 来安装一个包,并且添加到 package.json 的 dependencies 里面)...转载 2020-07-04 21:59:21 · 356 阅读 · 0 评论