echarts
关注
分享
扫一扫
蒲公英
前端小白晋级中……
展开
-
Echarts22--echarts中tooltip提示框位置控制
问题及解决问题：在div的边缘处放了echarts图，但鼠标移上去时，tooltip显示不完全，如下图：修改后的结果：问题解决的参考地址：https://www.cnblogs.com/yeminglong/p/9934910.html方法步骤关键代码：tooltip: { trigger: 'item', formatter: '{a} <br/>{b}: {c} ({d}%)', position: (point, param原创 2021-07-07 10:00:54 · 766 阅读 · 0 评论 -
Echarts21-- 折线面积图
结果：代码（可放在echarts里直接运行）option = { tooltip: { trigger: 'axis', axisPointer: { type: 'shadow' }, formatter: (params) => { return params[0].name + '<br>' + params[0].marker + ' ' +原创 2021-06-22 10:15:33 · 229 阅读 · 0 评论 -
Echarts20 -- 给echarts柱状图提示数据添加上单位
前言问题如图：提示内容没有单位解决结果如图关键代码：tooltip: { trigger: 'axis', axisPointer: { type: 'shadow' }, formatter: (params) => { return params[0].name + '<br>' + params[0].marker + ' ' + params[原创 2021-06-21 18:00:10 · 8392 阅读 · 2 评论 -
Echarts19 -- x轴文字折行显示
错误示范：原创 2021-05-07 14:41:31 · 1126 阅读 · 0 评论 -
Echarts18 --会动的echarts图
option = { title: { text: '动态数据', subtext: '纯属虚构' }, tooltip: { trigger: 'axis', axisPointer: { type: 'cross', label: { backgroundColor: '#283b56' } }原创 2021-04-15 11:22:33 · 1111 阅读 · 1 评论 -
Echarts17 --x轴name的位置改变
目标：代码： xAxis: { name: 'x轴name', nameLocation: 'center', nameTextStyle: { padding: [20, 0, 0, 0] // 四个数字分别为上右下左与原位置距离 }, splitLine: { lineStyle: { type: 'dashed' // 背景网原创 2021-04-08 14:05:13 · 4687 阅读 · 0 评论 -
Echarts16 ---散点图-趋势图
根据散点画出趋势图，目标如下：代码：可直接在echarts官网里运行// See https://github.com/ecomfe/echarts-statecharts.registerTransform(ecStat.transform.regression);let data = [ [1, 4862.4], [2, 5294.7], [3, 5934.5], [4, 7171.0], [5, 8964.4], [6, 10原创 2021-04-07 18:03:04 · 1872 阅读 · 0 评论 -
Echarts15-- 环形图中间加字
结果代码：<div echarts [options]='optionDw' style=" width: 100%; height: 100%;"></div> this.optionDw = { tooltip: { trigger: 'item', formatter: '{a} <br/>{b}: {c} ({d}%)' }, color: ['#FBD437', '#D8D8D8'],原创 2021-03-25 10:32:37 · 1044 阅读 · 0 评论 -
Echarts14--虚实线结合图
option = { xAxis: { type: 'category', data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'] }, yAxis: { type: 'value' }, series: [ { data: [150, 230, 224, '', '', ''], type: 'line',原创 2021-02-24 14:04:53 · 1641 阅读 · 0 评论 -
Echarts13-- 多条纵轴下控制背景线条数
需要的最终结果用这个作为实例，也是需要的最终结果可以观察到，尽管有多条纵轴，但背景线条却不乱分析：之所以能够均匀分线，是因为设置了比例相同的min和max，但许多时候，我们是不能设置的，因为数据的大小不可控问题描述不设置min和max时如下图，看起来很难看，也是我们遇见的问题解决办法分析1：还是要设置min和max，还有interval（interval是强制设置坐标轴分割间隔），我们要处理的就是如何在数据不确定的情况下设置min、max、interval。min分析：min，y轴最小原创 2021-02-24 11:07:48 · 458 阅读 · 0 评论 -
Echarts12-- 设置y轴文字提示位置
1、前提正常y轴标题目标图2、实现过程2.1、官方命令使用echarts后官方命令后option = { xAxis: { type: 'category', data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'] }, yAxis: { type: 'value', name: '好心情数量', // 居中 na原创 2021-01-12 13:52:28 · 12941 阅读 · 4 评论 -
Echarts11-- 折线图加粗并光滑
目标折线图官网原型图代码放在echarts官网上运行option = { xAxis: { type: 'category', data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'], axisLine: { // x轴线隐藏，但不隐藏背景线 show: false, }, axisTick: {原创 2020-12-21 14:43:12 · 5047 阅读 · 0 评论 -
Echarts10-- 把echarts里的series改成动态的
项目里有个这样的需求1、根据表格数据（接口返回的）组成echarts折线图表2、折线图表里，有4条线是固定的。根据表格中的项目，显示折线（有几个项目，就显示几条线，项目的个数是不固定的）思路1、根据接口渲染表格2、创建echarts轮廓3、创建至少5个数组，从表格中拿到四个固定值（最好遍历填充，免得后期发生变化）存放数组中，拿到时间在组成一个数组，还有其他的变量需要存储4、因为线条（项目）个数不确定，那么，图表的series就不能写死，标题就不能写死（动态这里是难点、重点）实现1、思路-原创 2020-12-11 11:44:14 · 6531 阅读 · 2 评论 -
折线图上放面积并隐藏XY轴的线
效果代码可以在echarts官网上直接运行具体技术点的解释在代码里option = { // 鼠标放上去的效果 tooltip: { trigger: 'axis', boundaryGap: false, axisPointer: { type: 'cross', label: { backgroundColor: '#6a798原创 2020-10-24 16:07:06 · 994 阅读 · 0 评论 -
Echarts9-- ECharts 的 legend 样式修改
推荐网址：1、https://blog.youkuaiyun.com/qq_42177730/article/details/86615257原创 2020-10-15 15:22:25 · 380 阅读 · 0 评论 -
Echarts8-- 使用echarts达到目标柱状图
原始图目标图代码：可直接在echarts官网里运行option = { color: ['#1890FF', '#36CBCB', '#4ECB73'], tooltip: { trigger: 'axis', axisPointer: { type: 'cross', crossStyle: { color: '#999' }原创 2020-10-15 15:02:35 · 480 阅读 · 0 评论 -
error:echarts问题：ERROR NullInjectorError:R3InjectorError(AppModule)[InjectionToken NG……
在angular2项目里，使用echarts时遇到的问题本来引入echarts之后，使用了一段时间，都没问题。但一段时间后，就报错了。特别纳闷，好好的怎么就不可以使用了？报错结果：把图片放大点原因：项目里使用的Echarts与Ngx-Echarts的版本不兼容解决重新下载Echarts与Ngx-Echartsnpm install echarts@4.4.0 ngx-echarts@4.2.1 --save// 或npm install echarts@4.4.0 ngx-echa原创 2020-10-14 11:46:08 · 1647 阅读 · 2 评论 -
Echarts7-- echarts达到目标柱状图
原始图：这是echarts官网图效果目标图代码（可直接在echarts的官网上运行）option = { // 鼠标放上去的效果 tooltip: { trigger: 'axis', axisPointer: { type: 'shadow' } }, // 外部格式 grid: { left: '3%',原创 2020-10-09 17:47:53 · 843 阅读 · 0 评论 -
Echarts6-- angular2中echarts随屏幕改变尺寸
前提：写好轮廓，添加图表之后，不能适配的情况有两个：1、改变窗口大小，图表不能随之改变2、图表的盒子设置width: 100%时，并不能继承父亲的宽，而是占据了整个屏幕宽度one、two、three评分页面。two有宽度，图表却没有继承。页面缩小时，图表也没有变小。解决办法换一种写法html<div class="box"> <div nz-row> <div nz-col nzSpan="8" class="one">原创 2020-09-30 17:31:23 · 565 阅读 · 0 评论 -
Echarts6-- echarts的饼图设计
前提原始图表：目标图表：实现原始代码option = { tooltip: { trigger: 'item', formatter: '{a} <br/>{b}: {c} ({d}%)' }, legend: { orient: 'vertical', left: 10, data: ['直接访问', '邮件营销', '联盟广告', '视频广告', '搜索引擎'] },原创 2020-09-30 11:42:30 · 440 阅读 · 0 评论 -
Echarts4-- echarts完成目标折线图
目标：代码：import { Component, OnInit, ViewChild } from '@angular/core';@ViewChild('main1') dom: any; constructor(private datePipe: DatePipe， private titleService: Title) { this.titleService.setTitle('尝试页面'); } async ngOnInit() { // 基于准备好的do原创 2020-07-03 17:14:17 · 616 阅读 · 0 评论 -
Echarts3-- 向echarts图表里传入数据
我使用的是angular9做的项目用的官方简单的echarts做例子<body> <!-- 为ECharts准备一个具备大小（宽高）的Dom --> <div id="main" style="width: 600px;height:400px;"></div> <script type="text/javascript"> // 基于准备好的dom，初始化echarts实例 var my原创 2020-06-06 18:19:30 · 4870 阅读 · 0 评论 -
Echarts2-- Echart的学习方法
这两天听了关于echart的教学视频，感觉他对官网分析很好，按他的分析去学echarts，会简单的多1、五部使用法先知道怎么用，再去了解细节2、看着官网学习：链接：https://echarts.apache.org/zh/index.html2.1、先看他的教程2.2、先看看示例：2.3、事例里只有option的内容，因此看option的讲解这个配置项就是option的详解...原创 2020-04-22 18:18:12 · 351 阅读 · 0 评论 -
Echarts1-- angular2中引入echarts
我用的是angular-cil 9.01、下载echartsnpm install echarts --savenpm install ngx-echarts --save或cnpm install echarts --savecnpm install ngx-echarts --save下载结果：2、 在angular.json 配置echarts路径"scripts"...原创 2020-04-22 15:33:41 · 480 阅读 · 0 评论