精华内容
下载资源
问答
  • echarts5.0
    千次阅读
    2021-01-11 15:12:53

    先来占个坑,后续会写一些5.0的文章

    echarts5.0新特性: 传送门
    echarts标题(title)设置背景图片: 传送门
    echarts图表(大屏可视化)文字大小自适应: 传送门
    echarts3d地图缩放和拖拽时会先重置地图再缩放的问题(以及tootip工具栏点击问题): 传送门
    echarts省市地区Js及json下载: 传送门
    欢迎进群交流qq群:823792205

    更多相关内容
  • echarts5.0新特性

    千次阅读 2021-03-23 10:49:02
    //echarts5.0之前的引入方式 import echarts from 'echarts' //echarts5.0的引入方式 import * as echarts from 'echarts' 新加了按需引入 import * as echarts from 'echarts/core'; import { BarChart ...

    样式属性的变化

    1. 去除 default exports 的支持
    	//echarts5.0之前的引入方式
    	import echarts from 'echarts'
    	
    	//echarts5.0的引入方式
    	import * as echarts from 'echarts'
    
    1. 新加了按需引入
    	import * as echarts from 'echarts/core';
    	import { BarChart } from 'echarts/charts';
    	import { GridComponent } from 'echarts/components';
    	// 注意,新的接口中默认不再包含 Canvas 渲染器,需要显示引入,如果需要使用 SVG 渲染模式则使用 SVGRenderer
    	import { CanvasRenderer } from 'echarts/renderers';
    	
    	echarts.use([BarChart, GridComponent, CanvasRenderer]);
    
    1. Echarts5.0 移除了内置的 geoJSON(原先在 echarts/map 文件夹下)
    2. Echarts5.0 不再支持 IE8 浏览器
    3. Echarts5.0之前的版本
    	5.0之前版本  (itemStyle | lineStyle | areaStyle的优先级)< visualMap的优先级,
    	5.0版本		 (itemStyle | lineStyle | areaStyle的优先级)> visualMap的优先级,
    
    1. 图形元素 transform属性的改动:
    	position: [number, number] 改为 x: number / y: number。
    	scale: [number, number] 改为 scaleX: number / scaleY: number。
    	origin: [number, number] 改为 originX: number / originY: number。
    
    1. 图形元素附带的文本(text)的声明方式被改变:
    	textPosition 改为 textConfig.position
    	textOffset 改为 textConfig.offset
    	textRotation 改为 textConfig.rotation
    	textDistance 改为 textConfig.distance
    
    	//下面左边部分的属性在 style 和 style.rich.? 中已不推荐使用或废弃。请使用下面右边的属性:
    	textFill => fill
    	textStroke => stroke
    	textFont => font
    	textStrokeWidth => lineWidth
    	textAlign => align
    	textVerticalAlign => verticalAlign
    	textLineHeight =>
    	textWidth => width
    	textHeight => hight
    	textBackgroundColor => backgroundColor
    	textPadding => padding
    	textBorderColor => borderColor
    	textBorderWidth => borderWidth
    	textBorderRadius => borderRadius
    	textBoxShadowColor => shadowColor
    	textBoxShadowBlur => shadowBlur
    	textBoxShadowOffsetX => shadowOffsetX
    	textBoxShadowOffsetY => shadowOffsetY
    
    
    1. label属性 color、textBorderColor、backgroundColor、borderColor 中,值 auto 已不推荐使用,而推荐使用 ‘inherit’ 代替
    2. hoverAnimation属性
    	series.hoverAnimation => series.emphasis.scale
    
    1. 折线图(line):
    	series.clipOverflow => series.clip
    
    1. 饼图(pie)
    	series.label.margin => series.label.edgeDistance
    	series.clockWise => series.clockwise
    	series.hoverOffset => series.emphasis.scaleSize
    
    1. 地图(map)
    	series.mapType => series.map 
    	选项 series.mapLocation 已经不推荐使用。
    
    1. 仪表盘(gauge):
    	series.clockWise => series.clockwise 
    	series.hoverOffset => series.emphasis.scaleSize
    
    1. 雷达图(radar):
    	radar.name => radar.axisName
    	radar.nameGap => radar.axisNameGap
    
    1. 新增动态排序柱状图(bar-racing)以及动态排序折线图(line-racing)
      动态排序柱状图
      动态排序折线图
      在这里插入图片描述

    2. 新增自定义系列动画

    包括标签数值文本的插值动画,图形的形变(morph)、分裂(separate)、合并(combine)等效果的过渡动画

    1. 提示框的样式进行了优化

    通过对字体样式,颜色的调整,指向图形的箭头,跟随图形颜色的边框色等功能,让提示框的默认展示优雅又清晰

    5.0之前版本的提示框样式
    在这里插入图片描述
    5.0的提示框样式
    在这里插入图片描述

    1. 标签的样式进行了优化

    可以通过一个配置项开启自动隐藏重叠的标签。对于超出显示区域的标签,可以选择自动截断或者换行,让密集的标签能清晰显

    1. 时间轴进行了优化

    时间轴不再如之前般绝对平均分割,而是选取年、月、日、整点这类更有意义的点来展示,并且能同时显示不同层级的刻度。标签的 formatter 支持了时间模版(例如 {yyyy}-{MM}-{dd}),并且可以为不同时间粒度的标签指定不同的 formatter,结合已有的富文本标签,可以定制出醒目而多样的时间效果。

    1. 新加了多种仪表盘图表,如:
      在这里插入图片描述在这里插入图片描述在这里插入图片描述
      在这里插入图片描述

    2. 支持了饼图、旭日图、矩形树图的扇形圆角
      在这里插入图片描述在这里插入图片描述

    3. 新增了贴花的功能
      在这里插入图片描述

    4. 还有最重要的一点,优化渲染速度

    对海量数据下的 CPU 消耗、内存占用、初始化时间都进行了深度的优化,使得百万量级的数据也能做到实时的更新(每次更新耗时少于 30ms),甚至对于千万级的数据,也可以在 1s 内渲染完,并且保持很小的内存占用以及流畅的提示框(tooltip)等交互

    暂时就这么多,后面如果在发现有改动的地方会及时补充!!!

    展开全文
  • Vue 3.0+Vite 2.0+Vue-Router4.0+Element-Plus+Echarts 5.0+Axios 开发的后台管理系统 Vue 3.0+Vite 2.0+Vue-Router4.0+Element-Plus+Echarts 5.0+Axios 开发的后台管理系统 Vue 3.0+Vite 2.0+Vue-Router4.0+...
  • echarts 5.0之map使用

    2022-04-01 09:54:38
    echarts升级5.0之后 map的使用 v5 移除了内置的 geoJSON(原先在 echarts/map 文件夹下),如果使用者仍然需要他们,可以去从老版本中得到(下载文件中的map文件,引入本地),或者自己寻找更合适的数据然后通过 ...

    echarts升级5.0之后 map的使用

    v5 移除了内置的 geoJSON(原先在 echarts/map 文件夹下),如果使用者仍然需要他们,可以去从老版本中得到(下载文件中的map文件,引入本地),或者自己寻找更合适的数据然后通过 registerMap 接口注册到 ECharts 中。

    ECharts 中提供了两种格式的地图数据,一种是可以直接 script 标签引入的 js 文件,引入后会自动注册地图名字和数据。还有一种是 JSON 文件,需要通过 AJAX 异步加载后手动注册。

    // JavaScript 引入示例
    <script src="echarts.js"></script>
    <script src="map/js/china.js"></script>
    <script>
    var chart = echarts.init(document.getElementById('main'));
    chart.setOption({
        series: [{
            type: 'map',
            map: 'china'
        }]
    });
    </script>
    
    
    // JSON 引入示例
    $.get('map/json/china.json', function (chinaJson) {
        echarts.registerMap('china', chinaJson);
        var chart = echarts.init(document.getElementById('main'));
        chart.setOption({
            series: [{
                type: 'map',
                map: 'china'
            }]
        });
    });
    // 或
     import china from 'map/json/china.json' //本地路径
     echarts.registerMap('china', china);
     var chart = echarts.init(document.getElementById('main'));
        chart.setOption({
            series: [{
                type: 'map',
                map: 'china'
            }]
        });
    
    展开全文
  • vue2整合echarts5.0

    2021-07-26 16:17:21
    开始操作安装Echarts依赖1.前提:使用vue-cli创建的项目2.执行命令,默认安装最新版本的echarts3.在main.js中绑定echarts到vue的原型链上4.在组件中引入即可 安装Echarts依赖 1.前提:使用vue-cli创建的项目 2.执行...

    安装Echarts依赖

    1.前提:使用vue-cli创建的项目

    2.执行命令,默认安装最新版本的echarts

    npm install echarts -S
    

    3.在main.js中绑定echarts到vue的原型链上

    import * as echarts from 'echarts'
    Vue.prototype.$echarts 
    展开全文
  • 1.先找好你要渲染的地图json或者省市级的json 2....初始化图表 this.chart = echarts.init(this.$el) 5.给初始化地图设置基本信息 this.chart.setOption({ series: { type: 'map', map: 'chinaJson' } })
  • Echarts 5.0版本注意

    千次阅读 2021-03-06 10:06:59
    echarts 5.0与4.0区别 官方介绍 1. 如果使用者在 v4 中这样引用了 echarts: import echarts from 'echarts'; // 或者按需引入 import echarts from 'echarts/lib/echarts'; 这两种方式,v5 中不再支持了。 使用者...
  • 1:下载echarts最新版本 yarn add echarts -D 默认最新版本 5.2.2版本 在assets文件夹下新建data.json,中国地图需要用到 {"type":"FeatureCollection","features":[{"type":"Feature","id":"xin_jiang",...
  • vue中使用echarts5.0报错

    2021-05-28 22:15:07
    echats5.0 版本引入问题报错:“export ‘default‘ (imported as ‘echarts‘) was not found in ‘echarts‘ 引入方式改为以下即可: import * as echarts from 'echarts'; // 或 const echarts = require('...
  • vue3+ts中使用echarts5.0

    2021-04-13 15:31:29
    npm install echarts --save 在要使用的页面引入 import * as echarts from "echarts"; 容器配置 <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12"> <el-card shadow="always" class="box-...
  • 一、 安装ECharts 组件 ...主要是导入方式和5.0以下版本有差异,需要使用下面的方式 import * as echarts from "echarts"; demo <template> <div> <!-- <div>图表</div> --&g
  • echarts5.0的地图json文件,包含全国和各省的json
  • 最新版的 Echarts5.0 使用 import echarts from 'echarts' 导入,会出发现导出的 echarts 是 undefined的情况,无法正常使用。 解决方案一 新版本有问题就用旧版本咯 # 卸载 Echarts5.0 npm uninstall echarts # ...
  • echats5.0 版本引入问题报错:“export ‘default‘ (imported as ‘echarts‘) was not found in ‘echarts‘ 引入方式改为以下即可: import * as echarts from 'echarts'; // 或 const echarts = require('...
  • 解决方法:修改echarts引入语句为 import * as echarts from 'echarts'; 或const echarts = require('echarts');
  • React中使用echarts 5.0

    千次阅读 2021-02-17 02:20:18
    我这里下载的是5.0版本的 按照官网的完整代码提示 复制下来就可以了 在componentDidMount初始图表,配置项官网都有介绍 代码可以直接使用 import React, { Component } from 'react' import * as echarts ...
  • 解决方法: 1.安装4.9版本npm install echarts@4.9.0 2.自行导入js
  • echarts.min5.0.js

    2021-01-28 11:40:07
    存放echartsV5.0最新版本JS,方便自己与其他人取用
  • 演示地址 下载地址
  • 这是echarts5.0的新增的图表 主要的动态排序属性是 series 里的 realtimeSort: true, 所以 很重要的一点事在项目引入的时候 必须 引入echarts5 npm i echarts@5.0.2 这很重要 在main.js引入 **注意 ** 引入的话 要...
  • 先看实现效果: option = { series: [ { type: 'gauge', radius:'85%', startAngle: 225, endAngle: -45, axisLine: { lineStyle: { width: 1, color: [ [1,
  • Vue3+Vite引入Echarts5.0图表库

    千次阅读 2021-01-04 21:17:26
    目前ECharts已更新到5.0版本,在Vue中引入并不难,npm/cnpm安装后在需要的组件中引入: import echarts from 'echarts' 即可。 但, 问题是这是以前的版本可行的,更新到5.0版本后需要使用其他方法。 另一方面官方...
  • echarts5.0 去掉 hover 折线变粗方法

    千次阅读 2021-02-19 18:58:07
    今天 echarts 版本更新至5.++,发现鼠标悬停在折线图上,折线变粗,这个效果和我的需求相悖,所以想办法去掉此效果 解决过程 emphasis 折线图的高亮状态。 属性: scale:boolean 类型,默认true。表示是否开启 ...
  • Echarts5.0问题解决 https://blog.csdn.net/weixin_42029374/article/details/112240025 vue echarts引入 自定义主题 用json方式 https://blog.csdn.net/weixin_43640258/article/details/102822091 vue echarts引入...
  • echarts5.0——实现大屏炫酷图表,类目名溢出换行,南丁格尔玫瑰图半圆,折线图填充渐变、叠加渐变,极坐标半圆进度条,柱状图柱体渐变
  • 如图 一:6小时分割 intervalNum =12 xAxis: { type: "time", min:min, max:today, //today为当前时间按小时取整。 如14:00 show: true, minInterval: 3600 * intervalNum * 1000, //12 axisLabel:{ ...
  • echarts_5.0.0.zip

    2020-12-30 17:15:10
    ECharts,一个使用 Js实现的开源可视化库,可流畅运行在 PC 和移动设备上,兼容当前绝大部分浏览器(IE8/9/10/11,Chrome,Firefox,Safari等),底层依赖矢量图形库 ZRender,提供直观,交互丰富,可高度个性化定制...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 1,562
精华内容 624
关键字:

echarts5.0