Echarts学习笔记

标签： Echart 分类： Javascript 创建时间：2019-12-12 08:58:11 更新时间：2025-01-20 09:45:24

学习图表，最多的听到的可能事百度的echart吧，后来又出现了蚂蚁金服的G2和G7,对于选择困难症来说，就比较难以抉择了。蚂蚁金服除了G2还有G6和L7,我简单的查看了一下，G2主要事图表，G6主要是关系图等图，还有L7主要关注点事地理数据的可是话。

参考文章：
1.三大图表库：ECharts 、 BizCharts 和 G2，该如何选择？

1.title标题居中

title标题，就是图表上面显示的文字，如果使用居中，大部分的文章可能会提到：textAlign:’center’，但是实际上

只有 left 是具体数值的时候 textAlign 才有效，但是默认 left 是 'left'，所以忽略 textAlign 强制左对齐

所以居中，只需要使用 left: ‘center’ 属性就好了，如果你加入了textAlign，可能还会出现莫名奇妙的标题有一部分被遮挡的问题。

title: {
    text: '热损率(%)',
    y:'top',
    left: 'center',
},

参考文章：
1.标题使用textAlign无法居中 (这篇issue很有用)
2.echarts之title-textAlign （居中） (没有用)
3.echarts横坐标自动判断文字遮挡问题-简单记录-仅供参考 (这篇其实和这里的主题没有关系，但是没地方放了，就放到这里好了)

2.display为none时无法正确的初始化

当图表的容器设置为none时，无法正常的初始化图表。

【解决方法】
就是在页面渲染完成之后，重新调用初始化resize方法

this.$nextTick(()=>{
    if(this.chart){
        this.chart.resize();
    }
})

参考文章:
1.【Echarts】当容器div为display:none，图表初始化显示问题这里有说明，就是为什么当容器的display为none时，无法获取宽高
2.echart设置display:none加载显示为空白（实用，赞）

3.饼图中间文字

主要实现效果，就是在环形图中间添加提示文字，并且上下的字体样式不一样。

label: {
    normal: {
        show: false,
        position: 'center',
        color:'#4c4a4a',
        formatter: '{name|{b}}'+ '\n\r' + '{number| {c} %}',
        rich: {
            name:{
                fontSize: 12,
                fontFamily : "PingFangSC-Regular, sans-serif",
                color:'#303133'
            },
            number: {
                fontFamily : "Bebas Neue",
                fontSize: 16,
                color:'#000000',
            },
        }
    },
    emphasis: {//中间文字显示
        show: true,
    }
},

参考文章:
1.vue echarts 给饼图中间添加文字，并且添加多个样式这个不错,还有另外一种实现方式
2.echarts-环形图中心显示文字（二）
3.echarts环形图自动轮播选中，中间显示数据，移入停止轮播

3.渐变色

【方式一】
使用LinearGradient函数，但是官方对这个没有解释，虽然可以使用

color: new echarts.graphic.LinearGradient(  // 渐变色
    0, 0, 1, 0,
    [
        {offset: 0, color: '#3977E6'},
        {offset: 1, color: '#37BBF8'}

    ]
),

【方式二】
直接使用对象指定

color:{
    x: 0,
    y: 0,
    x2: 1,
    y2: 0,
    colorStops: [{
        offset: 0, color: '#3977E6' // 0% 处的颜色
    }, {
        offset: 1, color: '#37BBF8' // 100% 处的颜色
    }],
    global: false // 缺省为 false
}

参考文章:
1.echarts之渐变色设置
2.echarts 柱状图，每根柱子显示不同颜色（随机显示和定制显示）

4.进度条

可以使用echart实现进度条的效果

参考文章:
1.vue 用echarts写的进度条组件

5.x轴文字倾斜

有时候x轴的文字较长，比如日期类型的，可以尝试将x轴的文字进行倾斜。比如这样：

// 声明一个 X 轴，类目轴（category）。默认情况下，类目轴对应到 dataset 第一列。
xAxis: {
    type: 'category',
    axisLabel: {
        interval:'auto', // 间隔显示, auto 为自动显示，0 为强制显示
        rotate:40
    }
},

如果文字较多，还可以间隔显示

参考文章:
1.echarts里面X轴文字斜着放
2.ECharts 坐标轴标签、tooltip文本格式化
3.echarts X轴值的设置 formatter
4.echarts X轴数据密集，强制设置坐标轴分割间隔。

6.数据更新

这里目前查到的数据更新方法，就是重新设置option参数:mychart.setOption(option,true)，有些地方说这个方法不生效，我觉得可以生效的啊。

参考文章:
1.echarts更新数据的方法，更新配置这的data 需要根据实际情况改变，这只是改了series里第一项的数据，如果有多项，你的data 应该传个数组，循环给 option.series[i].data 赋值，执行myChart.setOption(option)更新数据。
2.数据的动态更新所有数据的更新都通过 setOption实现，你只需要定时获取数据，setOption 填入数据，而不用考虑数据到底产生了哪些变化，ECharts 会找到两组数据之间的差异然后通过合适的动画去表现数据的变化。
3.echarts3 清空上一次加载的数据正确的操作模式，手动在新的渲染的时候清空xData和yData

7.调整柱状图单个柱子的颜色

参考文章:
1.echarts改变柱状图每个柱子的颜色
2.echarts 用数据集创建的柱状图如何给每个bar设定颜色？一个比较简单的方法是给series.bar.itemStyle.color设置一个callback，它的参数是数据点s，其中s.dataIndex是数据点的序号，你可以根据这个值返回特定颜色，就可以改变每个柱子颜色了。
3.dataset 可以为每个数据指定样式

8.四色圆环

这个我倒是实现了，主要就是用了一个遮罩层实现的。

参考文章:
1.绘制一个扇形
2.使用css绘制任意角度的扇形
3.纯css3实现圆环占比图
4.css实现百分比环形图（圆环图）和一点细节

9.按需引入

(1) 编写引入文件
我这里使用了官方的代码，另存为了echarts.ts文件，多加了一个导出的操作。

import * as echarts from "echarts/core"
import {
  BarChart,
  // 系列类型的定义后缀都为 SeriesOption
  BarSeriesOption,
  LineChart,
  LineSeriesOption
} from "echarts/charts"
import {
  TitleComponent,
  // 组件类型的定义后缀都为 ComponentOption
  TitleComponentOption,
  TooltipComponent,
  TooltipComponentOption,
  GridComponent,
  GridComponentOption,
  // 数据集组件
  DatasetComponent,
  DatasetComponentOption,
  // 内置数据转换器组件 (filter, sort)
  TransformComponent
} from "echarts/components"
import { LabelLayout, UniversalTransition } from "echarts/features"
import { CanvasRenderer } from "echarts/renderers"

// 通过 ComposeOption 来组合出一个只有必须组件和图表的 Option 类型
type ECOption = echarts.ComposeOption<
  | BarSeriesOption
  | LineSeriesOption
  | TitleComponentOption
  | TooltipComponentOption
  | GridComponentOption
  | DatasetComponentOption
>;

// 注册必须的组件
echarts.use([
  TitleComponent,
  TooltipComponent,
  GridComponent,
  DatasetComponent,
  TransformComponent,
  BarChart,
  LineChart,
  LabelLayout,
  UniversalTransition,
  CanvasRenderer
])
// 将配置好的 echarts 导出
export default echarts

(2) 使用
直接通过导入 echarts.ts 文件，就可以直接使用了，有人也用了 provide / inject,进行引入。

<script lang="ts" setup>
import { onMounted, ref } from "vue"
import echarts from "@/utils/echars.ts"

const chart = ref(null)

onMounted(() => {
    // 基于准备好的dom，初始化echarts实例
    const myChart = echarts.init(chart.value)
    // 绘制图表
    myChart.setOption({
        title: {
            text: "ECharts 入门示例"
        },
        tooltip: {},
        xAxis: {
            data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"]
        },
        yAxis: {},
        series: [
            {
            name: "销量",
            type: "bar",
            data: [5, 20, 36, 10, 10, 20]
            }
        ]
    })
})
</script>

(3) echart.d.ts 声明文件
这个部分就是对于 TypeScript 来说的，要是使用 option:any 这样的类型，似乎不太好。

参考文章:
1.vue3+ts+echarts，实现按需引入和类型界定这篇文章给出了一个例子，在App.vue的界面进行引入，然后利用provide函数，将形成的echarts变量传递给其他的子页面，这样就能实现全局使用的问题.全部的类型都摘了出来，然后单独写到一个echart.d.ts的申明文件中去。
2.在项目中引入 Apache ECharts 对于使用了 TypeScript 来开发 ECharts 的开发者，我们提供了类型接口来组合出最小的 EChartsOption 类型。这个更严格的类型可以有效帮助你检查出是否少加载了组件或者图表。
3.Vue3 + Echarts + TypeScript按需导入组建封装—— 鱼(编码体验)和熊掌(构建优化)俺都要这里将Echarts进行了封装，还写了封装和优化的过程。总的来说，这次Chart组件改造的效果还是不错的，在确保组件使用的便利的基础上，减少了 44% 的 echart打包大小，Gzip 后我们的首页大小降低到了 500KB 还可以接受。不过通过对上面的构建报告图的观察，其实还是能够发现更多优化点的，比如抽离公共组件包 ElementPlus，甚至 echarts 本身也可以抽出来，过分点的话甚至可以把类型和我们设置的基础渲染工具去掉，使得Chart组件本身更精简。
4.vue3+ts+echarts实现按需引入和类型界定方式这里也是用的 provide/ inject 的方式进行引入的。

往期推荐

文章目录

微信公众号

广告位

诚心邀请广大金主爸爸洽谈合作

每日一省

isNaN 和 Number.isNaN 函数的区别？

1.函数 isNaN 接收参数后，会尝试将这个参数转换为数值，任何不能被转换为数值的的值都会返回 true，因此非数字值传入也会返回 true ，会影响 NaN 的判断。

2.函数 Number.isNaN 会首先判断传入参数是否为数字，如果是数字再继续判断是否为 NaN ，不会进行数据类型的转换，这种方法对于 NaN 的判断更为准确。

每日二省

为什么0.1+0.2 ! == 0.3，如何让其相等?

一个直接的解决方法就是设置一个误差范围，通常称为“机器精度”。对JavaScript来说，这个值通常为2-52，在ES6中，提供了Number.EPSILON属性，而它的值就是2-52，只要判断0.1+0.2-0.3是否小于Number.EPSILON，如果小于，就可以判断为0.1+0.2 ===0.3。

每日三省

== 操作符的强制类型转换规则？

1.首先会判断两者类型是否**相同，**相同的话就比较两者的大小。

2.类型不相同的话，就会进行类型转换。

3.会先判断是否在对比 null 和 undefined，是的话就会返回 true。

4.判断两者类型是否为 string 和 number，是的话就会将字符串转换为 number。

5.判断其中一方是否为 boolean，是的话就会把 boolean 转为 number 再进行判断。

6.判断其中一方是否为 object 且另一方为 string、number 或者 symbol，是的话就会把 object 转为原始类型再进行判断。

每日英语

Happiness is time precipitation, smile is the lonely sad.

幸福是年华的沉淀，微笑是寂寞的悲伤。