echarts使用与踩坑
0.踩坑点
- 1.
当图表不显示在页面(display:none)执行resize可能会导致图表样式混乱
1. 官网示例
import * as echarts from 'echarts';
// 基于准备好的dom，初始化echarts实例
// 注意: 这里的main元素要有宽度才可以,不然页面上是看不到渲染的图标的,但实际上echarts已经初始化,
// 但是由于绘制挂载的元素没高度不可见 官网这里没有给出对应的main相关的代码 因此直接写一个<div id='main'></div> 是看不到渲染的元素的
var myChart = echarts.init(document.getElementById('main'));
// 绘制图表
myChart.setOption({
title: {
text: 'ECharts 入门示例'
},
tooltip: {},
xAxis: {
data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
},
yAxis: {},
series: [
{
name: '销量',
type: 'bar',
data: [5, 20, 36, 10, 10, 20]
}
]
});
2. 使用到的一些api
// 窗口变化后 重新绘制图形,达到自适应目的
window.addEventListener('resize', function() {
// 此处可以使用debounce进行加载优化
myChart.resize();
});
// 组件销毁 销毁掉绘制图表
myChart.dispose();
3.使用到的属性
const option: EChartsOption = {
// 标题
title: {
// 是否显示标题
show: true,
// 标题文字
text: 'Echarts示例',
// 图表位置 可以为百分比 或者具体px值
top: '5%',
bottom: 10,
left: 'center',
right: 'left',
// 标题样式
textStyle: {
fontSize: 12,
color: '#929292',
},
// 副标题
subtext: '副标题'
,
// 副标题样式
subtextStyle: {}
},
// 提示框
tooltip: {
// 数据项图形触发，主要在散点图，饼图等无类目轴的图表中使用。
trigger: 'item',
// 背景色
backgroundColor: 'white',
// 边框
borderColor: '#3fb1e3',
// 文字样式
textStyle: { color: '#333' },
// 内容自定义
formatter: (params) => {
const { marker, name, value } = params;
// marker为对应颜色小圆点
return `${name}<br/>${marker}自定义显示内容:${value}`;
},
// 可以是字符串 代表{a} {b} 代表params中的参数
// formatter: '{c}',
},
// 图例组件 即 饼图下方的分类 可以点击进行分类的选取 应用到对应的图形上
legend: {
// 图例类型 普通
type: 'plain',
// 是否展示
show: true,
// 位置
bottom: '2%',
// 文字样式
textStyle: { fontSize: '12px', padding: 0, minMargin: 0 },
// 颜色块大小 => 图例标记的图形宽度
itemWidth: 15,
// 图例组件整体宽度
width: 180,
// 图例的图形样式
itemStyle: {
borderWidth: 0,
},
},
series: [
{
name: '示例1',
// 图标类型 pie 饼图 bar 柱状图
type: 'pie',
// 位置
bottom: 20,
left: 'center',
// 'radius' 扇区圆心角展现数据的百分比，半径展现数据的大小。
// 'area' 所有扇区圆心角相同，仅通过半径展现数据大小。
roseType: 'area',
// 饼图半径 内半径:[20] 完整的园(披萨) 外半径: ['20%', '40%'] (最中间挖空一块 类似操场 只有跑道)
radius: ['20%', '40%'],
// 饼图的中心坐标
center: ['center', 'center'],
// 是否启用防止标签重叠策略，默认开启，在标签拥挤重叠的情况下会挪动各个标签的位置，防止标签间的重叠。 => 会溢出隐藏
avoidLabelOverlap: true,
// 饼图图形上的文本标签，可用于说明图形的一些数据信息，比如值，名称等。
label: {
show: true,
// 标签说明位置 不加带有折线 加了位置后折线会消失
// position: 'insideTop',
formatter: '{c}',
},
// 颜色 会均分 颜色例如 9条数据 3个颜色 每三个颜色为一组循环
color: ['#2ea6da', '#3fb1e3', '#b0f5ff'],
// 高亮区域配置
emphasis: {
// 是否开启悬浮高亮
disabled: false,
// 高亮区域样式
itemStyle: {
color: 'red'
},
// 高亮区域旁边的文字说明
label: {
show: true,
// formatter: '1122'
}
},
// 数据
data: [
{ value: 0, name: '分类1' },
{ value: 1, name: '分类2' },
{ value: 2, name: '分类3' },
{ value: 3, name: '分类4' },
{ value: 5, name: '分类5' },
{ value: 4, name: '分类6' },
{ value: 3, name: '分类7' },
{ value: 6, name: '分类8' },
{ value: 4, name: '分类9' },
],
},
],
};
4.按需加载
如果按需加载后渲染图表缺失,可能你使用到的组件没有按需加载进入
5.react示例注释代码,可直接复制运行
import React, { useEffect } from 'react'
import * as echarts from 'echarts/core';
import {
BarChart,
// 系列类型的定义后缀都为 SeriesOption
LineChart,
} from 'echarts/charts';
import {
TitleComponent,
// 组件类型的定义后缀都为 ComponentOption
TooltipComponent,
GridComponent,
// 数据集组件
DatasetComponent,
// 内置数据转换器组件 (filter, sort)
TransformComponent
} from 'echarts/components';
import { LabelLayout, UniversalTransition } from 'echarts/features';
import { CanvasRenderer } from 'echarts/renderers';
// 注册必须的组件
echarts.use([
TitleComponent,
TooltipComponent,
GridComponent,
DatasetComponent,
TransformComponent,
BarChart,
LineChart,
LabelLayout,
UniversalTransition,
CanvasRenderer
]);
type EChartsOption = echarts.EChartsCoreOption;
export default function Echarts() {
useEffect(() => {
let chartDom = document.getElementById('echarts')!;
let myChart = echarts.init(chartDom);
const option: EChartsOption = {
// 标题
title: {
// 是否显示标题
show: true,
// 标题文字
text: 'Echarts示例',
// 图表位置 可以为百分比 或者具体px值
top: '5%',
bottom: 10,
left: 'center',
right: 'left',
// 标题样式
textStyle: {
fontSize: 12,
color: '#929292',
},
// 副标题
subtext: '副标题'
,
// 副标题样式
subtextStyle: {}
},
// 提示框
tooltip: {
// 数据项图形触发，主要在散点图，饼图等无类目轴的图表中使用。
trigger: 'item',
// 背景色
backgroundColor: 'white',
// 边框
borderColor: '#3fb1e3',
// 文字样式
textStyle: { color: '#333' },
// 内容自定义
formatter: (params) => {
const { marker, name, value } = params;
// marker为对应颜色小圆点
return `${name}<br/>${marker}自定义显示内容:${value}`;
},
// 可以是字符串 代表{a} {b} 代表params中的参数
// formatter: '{c}',
},
// 图例组件 即 饼图下方的分类 可以点击进行分类的选取 应用到对应的图形上
legend: {
// 图例类型 普通
type: 'plain',
// 是否展示
show: true,
// 位置
bottom: '2%',
// 文字样式
textStyle: { fontSize: '12px', padding: 0, minMargin: 0 },
// 颜色块大小 => 图例标记的图形宽度
itemWidth: 15,
// 图例组件整体宽度
width: 180,
// 图例的图形样式
itemStyle: {
borderWidth: 0,
},
},
series: [
{
name: '示例1',
// 图标类型 pie 饼图 bar 柱状图
type: 'pie',
// 位置
bottom: 20,
left: 'center',
// 'radius' 扇区圆心角展现数据的百分比，半径展现数据的大小。
// 'area' 所有扇区圆心角相同，仅通过半径展现数据大小。
roseType: 'area',
// 饼图半径 内半径:[20] 完整的园(披萨) 外半径: ['20%', '40%'] (最中间挖空一块 类似操场 只有跑道)
radius: ['20%', '40%'],
// 饼图的中心坐标
center: ['center', 'center'],
// 是否启用防止标签重叠策略，默认开启，在标签拥挤重叠的情况下会挪动各个标签的位置，防止标签间的重叠。 => 会溢出隐藏
avoidLabelOverlap: true,
// 饼图图形上的文本标签，可用于说明图形的一些数据信息，比如值，名称等。
label: {
show: true,
// 标签说明位置 不加带有折线 加了位置后折线会消失
// position: 'insideTop',
formatter: '{c}',
},
// 颜色 会均分 颜色例如 9条数据 3个颜色 每三个颜色为一组循环
color: ['#2ea6da', '#3fb1e3', '#b0f5ff'],
// 高亮区域配置
emphasis: {
// 是否开启悬浮高亮
disabled: false,
// 高亮区域样式
itemStyle: {
color: 'red'
},
// 高亮区域旁边的文字说明
label: {
show: true,
// formatter: '1122'
}
},
// 数据
data: [
{ value: 0, name: '分类1' },
{ value: 1, name: '分类2' },
{ value: 2, name: '分类3' },
{ value: 3, name: '分类4' },
{ value: 5, name: '分类5' },
{ value: 4, name: '分类6' },
{ value: 3, name: '分类7' },
{ value: 6, name: '分类8' },
{ value: 4, name: '分类9' },
],
},
],
};
const chartResize = () => {
myChart.resize()
}
myChart.setOption(option);
window.addEventListener('resize', chartResize)
return () => {
myChart.dispose()
window.removeEventListener('resize', chartResize)
}
})
return (
<>
<div id='echarts' style={{ height: 300, width: '100%' }}>Echarts</div>
</>
)
}
