Skip to content

B
basic-vue-admin
提交 370b12f5 作者: vben
操作

feat: support echarts 5.0

上级 4d7001bb
正在显示 包含 137 行增加 和 141 行删除
CHANGELOG.zh_CN.md
## Wip
## (破坏性更新) Breaking changes
- `echarts` 升级到 5.0,并且进行按需引入(只需使用 `useECharts` 即可).
### ✨ Refactor
- 移除`global.less`,`mixin.less`,`design/helper`,由`windicss`代替,有用到的需要修改对应的样式
......
package.json
......@@ -31,7 +31,7 @@
"apexcharts": "^3.25.0",
"axios": "^0.21.1",
"crypto-es": "^1.2.7",
"echarts": "^4.9.0",
"echarts": "^5.0.2",
"lodash-es": "^4.17.20",
"mockjs": "^1.1.0",
"nprogress": "^0.2.0",
......@@ -54,7 +54,6 @@
"@iconify/json": "^1.1.303",
"@ls-lint/ls-lint": "^1.9.2",
"@purge-icons/generated": "^0.7.0",
"@types/echarts": "^4.9.3",
"@types/fs-extra": "^9.0.7",
"@types/http-proxy": "^1.17.5",
"@types/koa-static": "^4.0.1",
......
src/hooks/web/useECharts.ts
import { useTimeoutFn } from '/@/hooks/core/useTimeout';
import { tryOnUnmounted } from '/@/utils/helper/vueHelper';
import { unref, Ref, nextTick } from 'vue';
import type { EChartOption, ECharts } from 'echarts';
import echarts from 'echarts';
import type { EChartsType, EChartsOption } from 'echarts';
import { useDebounce } from '/@/hooks/core/useDebounce';
import { useEventListener } from '/@/hooks/event/useEventListener';
import { useBreakpoint } from '/@/hooks/event/useBreakpoint';
export type { EChartOption, ECharts };
import echarts from '/@/plugins/echarts';
export function useECharts(
elRef: Ref<HTMLDivElement>,
theme: 'light' | 'dark' | 'default' = 'light'
) {
let chartInstance: Nullable<ECharts> = null;
let chartInstance: Nullable<EChartsType> = null;
let resizeFn: Fn = resize;
let removeResizeFn: Fn = () => {};
const [debounceResize] = useDebounce(resize, 200);
resizeFn = debounceResize;
function init() {
function initCharts() {
const el = unref(elRef);
if (!el || !unref(el)) {
return;
......@@ -40,7 +40,7 @@ export function useECharts(
}
}
function setOptions(options: any, clear = true) {
function setOptions(options: EChartsOption, clear = true) {
if (unref(elRef)?.offsetHeight === 0) {
useTimeoutFn(() => {
setOptions(options);
......@@ -50,7 +50,7 @@ export function useECharts(
nextTick(() => {
useTimeoutFn(() => {
if (!chartInstance) {
init();
initCharts();
if (!chartInstance) return;
}
......@@ -74,7 +74,7 @@ export function useECharts(
return {
setOptions,
echarts,
resize,
echarts,
};
}
src/plugins/echarts/index.ts 0 → 100644
import * as echarts from 'echarts/core';
import { BarChart, LineChart, PieChart, MapChart, PictorialBarChart } from 'echarts/charts';
import {
TitleComponent,
TooltipComponent,
GridComponent,
PolarComponent,
AriaComponent,
ParallelComponent,
} from 'echarts/components';
import { SVGRenderer } from 'echarts/renderers';
echarts.use([
TitleComponent,
TooltipComponent,
GridComponent,
PolarComponent,
AriaComponent,
ParallelComponent,
BarChart,
LineChart,
PieChart,
MapChart,
SVGRenderer,
PictorialBarChart,
]);
export default echarts;
src/views/dashboard/analysis/components/AnalysisLine.vue
......@@ -73,11 +73,8 @@
name: '产品一',
type: 'line',
itemStyle: {
normal: {
color: '#5B8FF9',
},
color: '#5B8FF9',
},
// areaStyle: {},
data: [330, 132, 101, 134, 90, 230, 210, 150, 232, 234, 230, 400],
animationDuration: 4000,
},
......@@ -85,9 +82,7 @@
name: '产品二',
type: 'line',
itemStyle: {
normal: {
color: '#55D187',
},
color: '#55D187',
},
data: [220, 182, 191, 234, 290, 330, 310, 330, 232, 201, 330, 190],
animationDuration: 4000,
......
src/views/dashboard/analysis/components/AnalysisPie.vue
......@@ -35,9 +35,8 @@
color: 'black',
},
textAlign: 'center',
// @ts-ignore
x: '34.5%',
y: '40%',
left: '34.5%',
top: '40%',
},
],
tooltip: {
......
src/views/dashboard/analysis/components/TrendLine.vue
......@@ -15,9 +15,6 @@
onMounted(() => {
setOptions({
// title: {
// text: '产品成交额',
// },
tooltip: {
trigger: 'axis',
padding: 3,
......@@ -38,7 +35,7 @@
type: 'category',
boundaryGap: false,
axisTick: {
inside: true, // 刻度朝内
inside: true,
},
data: [
'一月',
......@@ -58,7 +55,7 @@
yAxis: {
type: 'value',
axisTick: {
inside: true, // 刻度朝内
inside: true,
},
},
series: [
......@@ -69,8 +66,6 @@
color: '#5B8FF9',
},
areaStyle: {
// 线性渐变，前4个参数分别是x0,y0,x2,y2(范围0~1);相当于图形包围盒中的百分比。如果最后一个参数是‘true’，则该四个值是绝对像素位置。
// @ts-ignore
color: new echarts.graphic.LinearGradient(
0,
0,
......@@ -88,10 +83,9 @@
],
false
),
shadowColor: 'rgba(118,168,248, 0.9)', // 阴影颜色
shadowBlur: 20, // shadowBlur设图形阴影的模糊大小。配合shadowColor,shadowOffsetX/Y, 设置图形的阴影效果。
shadowColor: 'rgba(118,168,248, 0.9)',
shadowBlur: 20,
},
// areaStyle: {},
data: [134, 330, 132, 101, 90, 230, 210, 150, 230, 400, 232, 234],
animationDuration: 3000,
},
......
src/views/demo/echarts/Line.vue
......@@ -4,7 +4,6 @@
<script lang="ts">
import { defineComponent, PropType, ref, Ref, onMounted } from 'vue';
import echarts from 'echarts';
import { useECharts } from '/@/hooks/web/useECharts';
import { getLineData } from './data';
......@@ -21,7 +20,7 @@
},
setup() {
const chartRef = ref<HTMLDivElement | null>(null);
const { setOptions } = useECharts(chartRef as Ref<HTMLDivElement>);
const { setOptions, echarts } = useECharts(chartRef as Ref<HTMLDivElement>);
const { barData, lineData, category } = getLineData;
onMounted(() => {
setOptions({
......@@ -63,7 +62,7 @@
name: 'line',
type: 'line',
smooth: true,
showAllSymbol: true,
showAllSymbol: 'auto',
symbol: 'emptyCircle',
symbolSize: 15,
data: lineData,
......@@ -73,13 +72,11 @@
type: 'bar',
barWidth: 10,
itemStyle: {
normal: {
barBorderRadius: 5,
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{ offset: 0, color: '#14c8d4' },
{ offset: 1, color: '#43eec6' },
]),
},
borderRadius: 5,
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{ offset: 0, color: '#14c8d4' },
{ offset: 1, color: '#43eec6' },
]),
},
data: barData,
},
......@@ -89,13 +86,11 @@
barGap: '-100%',
barWidth: 10,
itemStyle: {
normal: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{ offset: 0, color: 'rgba(20,200,212,0.5)' },
{ offset: 0.2, color: 'rgba(20,200,212,0.2)' },
{ offset: 1, color: 'rgba(20,200,212,0)' },
]),
},
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{ offset: 0, color: 'rgba(20,200,212,0.5)' },
{ offset: 0.2, color: 'rgba(20,200,212,0.2)' },
{ offset: 1, color: 'rgba(20,200,212,0)' },
]),
},
z: -12,
data: lineData,
......@@ -105,9 +100,7 @@
type: 'pictorialBar',
symbol: 'rect',
itemStyle: {
normal: {
color: '#0f375f',
},
color: '#0f375f',
},
symbolRepeat: true,
symbolSize: [12, 4],
......
src/views/demo/echarts/Map.vue
......@@ -6,8 +6,8 @@
import { useECharts } from '/@/hooks/web/useECharts';
import { mapData } from './data';
import { registerMap } from 'echarts';
import 'echarts/map/js/china';
export default defineComponent({
props: {
width: {
......@@ -23,21 +23,25 @@
const chartRef = ref<HTMLDivElement | null>(null);
const { setOptions } = useECharts(chartRef as Ref<HTMLDivElement>);
onMounted(() => {
onMounted(async () => {
const json = (await (await import('./china.json')).default) as any;
registerMap('china', json);
setOptions({
visualMap: {
min: 0,
max: 1000,
left: 'left',
top: 'bottom',
text: ['高', '低'],
calculable: false,
orient: 'horizontal',
inRange: {
color: ['#e0ffff', '#006edd'],
symbolSize: [30, 100],
visualMap: [
{
min: 0,
max: 1000,
left: 'left',
top: 'bottom',
text: ['高', '低'],
calculable: false,
orient: 'horizontal',
inRange: {
color: ['#e0ffff', '#006edd'],
symbolSize: [30, 100],
},
},
},
],
tooltip: {
trigger: 'item',
backgroundColor: 'rgba(0, 0, 0, .6)',
......@@ -50,33 +54,15 @@
{
name: 'iphone4',
type: 'map',
mapType: 'china',
map: 'china',
label: {
normal: {
show: true,
textStyle: {
color: 'rgb(249, 249, 249)',
fontSize: 10,
},
},
emphasis: {
show: true,
textStyle: {
color: 'rgb(249, 249, 249)',
fontSize: 14,
},
},
show: true,
color: 'rgb(249, 249, 249)',
fontSize: 10,
},
itemStyle: {
normal: {
label: { show: true },
areaColor: '#2f82ce',
borderColor: '#0DAAC1',
},
emphasis: {
label: { show: true },
areaColor: '#2f82ce',
},
areaColor: '#2f82ce',
borderColor: '#0DAAC1',
},
data: mapData,
},
......
src/views/demo/echarts/Pie.vue
......@@ -39,24 +39,33 @@
title: [
{
text: '各渠道投诉占比',
x: '2%',
y: '1%',
textStyle: { color: '#fff', fontSize: 14 },
left: '2%',
top: '1%',
textStyle: {
color: '#fff',
fontSize: 14,
},
},
{
text: '投诉原因TOP10',
x: '40%',
y: '1%',
textStyle: { color: '#fff', fontSize: 14 },
left: '40%',
top: '1%',
textStyle: {
color: '#fff',
fontSize: 14,
},
},
{
text: '各级别投诉占比',
x: '2%',
y: '50%',
textStyle: { color: '#fff', fontSize: 14 },
left: '2%',
top: '50%',
textStyle: {
color: '#fff',
fontSize: 14,
},
},
],
grid: [{ x: '50%', y: '7%', width: '45%', height: '90%' }],
grid: [{ left: '50%', top: '7%', width: '45%', height: '90%' }],
tooltip: {
formatter: '{b} ({c})',
},
......@@ -86,7 +95,6 @@
type: 'pie',
radius: '30%',
center: ['22%', '25%'],
color: ['#86c9f4', '#4da8ec', '#3a91d2', '#005fa6', '#315f97'],
data: [
{ value: 335, name: '客服电话' },
{ value: 310, name: '奥迪官网' },
......@@ -94,15 +102,11 @@
{ value: 135, name: '质检总局' },
{ value: 105, name: '其他' },
],
labelLine: { normal: { show: false } },
itemStyle: {
normal: {
label: {
show: true,
formatter: '{b} \n ({d}%)',
textStyle: { color: '#B1B9D3' },
},
},
labelLine: { show: false },
label: {
show: true,
formatter: '{b} \n ({d}%)',
color: '#B1B9D3',
},
},
{
......@@ -110,22 +114,17 @@
type: 'pie',
radius: '30%',
center: ['22%', '75%'],
color: ['#86c9f4', '#4da8ec', '#3a91d2', '#005fa6', '#315f97'],
labelLine: { normal: { show: false } },
labelLine: { show: false },
data: [
{ value: 335, name: 'A级' },
{ value: 310, name: 'B级' },
{ value: 234, name: 'C级' },
{ value: 135, name: 'D级' },
],
itemStyle: {
normal: {
label: {
show: true,
formatter: '{b} \n ({d}%)',
textStyle: { color: '#B1B9D3' },
},
},
label: {
show: true,
formatter: '{b} \n ({d}%)',
color: '#B1B9D3',
},
},
{
......@@ -134,8 +133,8 @@
xAxisIndex: 0,
yAxisIndex: 0,
barWidth: '45%',
itemStyle: { normal: { color: '#86c9f4' } },
label: { normal: { show: true, position: 'right', textStyle: { color: '#9EA7C4' } } },
itemStyle: { color: '#86c9f4' },
label: { show: true, position: 'right', color: '#9EA7C4' },
data: dataAll.sort(),
},
],
......
yarn.lock
......@@ -1447,13 +1447,6 @@
"@types/keygrip" "*"
"@types/node" "*"
"@types/echarts@^4.9.3":
version "4.9.3"
resolved "https://registry.npmjs.org/@types/echarts/-/echarts-4.9.3.tgz#8a143cf315f6ae88d0778d75a133b378974d37d5"
integrity sha512-CbgZUYdLy1G2BhCI6maBwVXmrqIx/D8KwUccMXQ9W2uyXNMjBvpIRXSs+UaBtvUihPV2f0g7LGj/yua1iY0VbQ==
dependencies:
"@types/zrender" "*"
"@types/estree@0.0.39":
version "0.0.39"
resolved "https://registry.npmjs.org/@types/estree/-/estree-0.0.39.tgz#e177e699ee1b8c22d23174caaa7422644389509f"
......@@ -1749,11 +1742,6 @@
dependencies:
"@types/yargs-parser" "*"
"@types/zrender@*":
version "4.0.0"
resolved "https://registry.npmjs.org/@types/zrender/-/zrender-4.0.0.tgz#a6806f12ec4eccaaebd9b0d816f049aca6188fbd"
integrity sha512-s89GOIeKFiod2KSqHkfd2rzx+T2DVu7ihZCBEBnhFrzvQPUmzvDSBot9Fi1DfMQm9Odg+rTqoMGC38RvrwJK2w==
"@types/zxcvbn@^4.4.0":
version "4.4.0"
resolved "https://registry.npmjs.org/@types/zxcvbn/-/zxcvbn-4.4.0.tgz#fbc1d941cc6d9d37d18405c513ba6b294f89b609"
......@@ -3809,12 +3797,13 @@ duplexer3@^0.1.4:
resolved "https://registry.npmjs.org/duplexer3/-/duplexer3-0.1.4.tgz#ee01dd1cac0ed3cbc7fdbea37dc0a8f1ce002ce2"
integrity sha1-7gHdHKwO08vH/b6jfcCo8c4ALOI=
echarts@^4.9.0:
version "4.9.0"
resolved "https://registry.npmjs.org/echarts/-/echarts-4.9.0.tgz#a9b9baa03f03a2a731e6340c55befb57a9e1347d"
integrity sha512-+ugizgtJ+KmsJyyDPxaw2Br5FqzuBnyOWwcxPKO6y0gc5caYcfnEUIlNStx02necw8jmKmTafmpHhGo4XDtEIA==
echarts@^5.0.2:
version "5.0.2"
resolved "https://registry.npmjs.org/echarts/-/echarts-5.0.2.tgz#1726d17a57cf05d62cd0567b4325e1201a56baf6"
integrity sha512-En0VYpc96nw2/2AZoBWPHsGi471zMublttj50kfFpYAeR4geup0Tj9iVgEXh7QYZFPnRiruDJEjcB5PXZ+BYzQ==
dependencies:
zrender "4.3.2"
tslib "2.0.3"
zrender "5.0.4"
ecstatic@4.1.4, ecstatic@^3.3.2:
version "4.1.4"
......@@ -8942,6 +8931,11 @@ ts-node@^9.1.1:
source-map-support "^0.5.17"
yn "3.1.1"
tslib@2.0.3:
version "2.0.3"
resolved "https://registry.npmjs.org/tslib/-/tslib-2.0.3.tgz#8e0741ac45fc0c226e58a17bfc3e64b9bc6ca61c"
integrity sha512-uZtkfKblCEQtZKBF6EBXVZeQNl82yqtDQdv+eck8u7tdPxjLu2/lp5/uPW+um2tpuxINHWy3GhiccY7QgEaVHQ==
tslib@^1.10.0, tslib@^1.8.1, tslib@^1.9.0, tslib@^1.9.3:
version "1.14.1"
resolved "https://registry.npmjs.org/tslib/-/tslib-1.14.1.tgz#cf2d38bdc34a134bcaf1091c41f6619e2f672d00"
......@@ -9873,10 +9867,12 @@ yocto-queue@^0.1.0:
resolved "https://registry.npmjs.org/yocto-queue/-/yocto-queue-0.1.0.tgz#0294eb3dee05028d31ee1a5fa2c556a6aaf10a1b"
integrity sha512-rVksvsnNCdJ/ohGc6xgPwyN8eheCxsiLM8mxuE/t/mOVqJewPuO1miLpTHQiRgTKCLexL4MeAFVagts7HmNZ2Q==
zrender@4.3.2:
version "4.3.2"
resolved "https://registry.npmjs.org/zrender/-/zrender-4.3.2.tgz#ec7432f9415c82c73584b6b7b8c47e1b016209c6"
integrity sha512-bIusJLS8c4DkIcdiK+s13HiQ/zjQQVgpNohtd8d94Y2DnJqgM1yjh/jpDb8DoL6hd7r8Awagw8e3qK/oLaWr3g==
zrender@5.0.4:
version "5.0.4"
resolved "https://registry.npmjs.org/zrender/-/zrender-5.0.4.tgz#89c355af908b9f64a301b38f751b7951f2c8a95a"
integrity sha512-DJpy0yrHYY5CuH6vhb9IINWbjvBUe/56J8aH86Jb7O8rRPAYZ3M2E469Qf5B3EOIfM3o3aUrO5edRQfLJ+l1Qw==
dependencies:
tslib "2.0.3"
zwitch@^1.0.0:
version "1.0.5"
......
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论