安装依赖 npm i echarts vue-echarts src/main.ts
import 'echarts'
封装echart参数方法
基于每次使用都要调整复杂配置, 或者高度封装的echart组件也不方便修改, 所以只进行配置封装 src 下建立 echartConfig 文件夹, 在建立对应的 pie.ts bar.ts line.ts 文件
环形图
pie.ts
/**
* 环形图配置项
*/
interface IPieConfig {
showLabelLine?: boolean; // 显示折线跟文字
titleName?: string; // 主标题
subTitleName?: string | number; // 副标题
legendPosition?: string[]; // 图例位置, 第一个参数是 'right' | 'bottom',第2个参数是left值|right值 3是bottom值 4是height值|width值
radius?: (string | number)[]; // 环形图大小
pieCenter?: string[]; // 环形图位置
isRosePie?: boolean; // 是否是玫瑰环形图
labelLine?: number[]; // 引线长度
unit?: string; // 单位
legendType?: string; // 图例类型
pieData?: {name: number | string, value: number | string}[]; // 数据
}
export const pieConfig = (config: IPieConfig) => {
// 单位
const unit = config.unit || config.titleName?.match(/\((.*?)\)/)?.[1] || '';
const options = {
// darkMode: true, // 暗色系
title: [
{
show: config.titleName ? true : false,
text: config.titleName || '',
x: config.pieCenter? parseInt(config.pieCenter[0]) - 1 + '%' : '24%',
y: '35%',
textAlign: 'center',
textStyle: {
fontSize: '14',
fontWeight: '400'
}
},
{
show: config.subTitleName ? true : false,
text: config.subTitleName || '',
left: config.pieCenter? parseInt(config.pieCenter[0]) - 1 + '%' : '24%',
top: '55%',
textAlign: 'center',
textStyle: {
fontSize: '26',
fontWeight: '700'
}
}
],
tooltip: {
trigger: 'item'
},
legend: {
show: config.legendPosition ? true : false,
orient: 'vertical', // vertical纵向 horizontal横向
type: config.legendType || 'plain', // 'scroll'滚动,'plain'正常
top: 'auto',
bottom: 'auto',
left: 'auto',
right: 'auto',
height: 'auto',
width: 'auto',
// icon: "circle", // 修改形状
itemHeight: 8, // 修改icon图形大小
itemWidth: 8, // 修改icon图形大小
textStyle: {
lineHeight: 20
},
// formatter: function (name) {
// const item = data.find(v => v.name === name)
// return name + `(${item?.percent})`;
// }
},
series: [
{
type: 'pie',
radius: config.radius || ['70%', '90%'],
center: config.pieCenter || ['25%', '50%'],
data: config.pieData || [],
roseType: false as string | boolean,
itemStyle: {
borderColor: '#fff',
borderWidth: 2
},
label: { // 圆环中间文字
show: config.showLabelLine || false,
formatter: `{unit|{b}}\n{value|{c}}${unit} {value|{d}}{unit|%}`,
// padding: [0, -90],
rich: {
value: {
fontSize: 16
},
unit: {
align: 'left',
fontSize: 16,
color: '#333'
}
}
},
labelLine: {
show: config.showLabelLine || false,
length: config.labelLine?.[0] || 20,
length2: config.labelLine?.[1] || 40
}
}
]
};
// 如果有同名配置则覆盖
Object.keys(options).forEach(key => {
if (config[key]) {
options[key] = config[key]
}
})
// 判断玫瑰环形图
if (config.isRosePie) {
options.series[0].roseType = 'area'; //area所有扇区圆心角相同，仅通过半径展现数据大小, 'radius' 扇区圆心角展现数据的百分比，半径展现数据的大小
}
// 图例位置, 第2个参数是top|left 3是right|bottom 4是height|width
if (config.legendPosition?.[0] === 'right') {
options.legend.orient = 'vertical';
options.legend.right = config.legendPosition[1] || '20%';
options.legend.bottom = config.legendPosition[2] || 'center';
options.legend.height = config.legendPosition[3] || 'auto';
}
if (config.legendPosition?.[0] === 'bottom') {
options.legend.orient = 'horizontal';
options.legend.left = config.legendPosition[1] || 'center';
options.legend.bottom = config.legendPosition[2] || '20%';
options.legend.width = config.legendPosition[3] || 'auto';
}
return options
}
柱状图
bar.ts
/**
* 柱状图配置项
*/
interface IBarConfig {
yAxisName1?: string; // 左侧Y轴标注
yAxisName2?: string; // 右侧Y轴标注
seriesName1?: string; // 第一组展示数据名称
seriesName2?: string; // 第二组展示数据名称
seriesData1?: Array<{ name: string, value: string | number }>; // 第一组展示数据
seriesData2?: Array<{ name: string, value: string | number }>; // 第二组展示数据
unit1?: string; // 第一组数据单位
unit2?: string; // 第二组数据单位
}
export const barConfig = ({ yAxisName1, yAxisName2, seriesName1, seriesName2, seriesData1, seriesData2, unit1, unit2 }: IBarConfig) => {
const options = {
backgroundColor: 'transparent', // 背景透明
tooltip: {
trigger: "axis",
axisPointer: {
type: "shadow",
}
},
grid: {
left: "6%",
top: "22%",
right: "2%",
bottom: "14%",
containLabel: true, // 展开y轴文字
},
legend: {
show: true,
icon: "circle",
itemHeight: 12,
itemWidth: 12,
itemGap: 50,
// x: "center",
// y: "top",
// top: 0,
// itemStyle: {
// borderColor: "#fff",
// borderWidth: 2,
// borderType: "solid",
// shadowColor: "rgba(0, 0, 0, 0.3)",
// shadowBlur: 2
// },
// textStyle: {
// fontSize: 14,
// lineHeight: 14,
// padding: [0, 0, -2, 0],
// rich: {
// a: {
// verticalAlign: "middle"
// }
// }
// }
},
dataZoom: [
{
xAxisIndex: 0, // 这里是从X轴的0刻度开始
type: 'slider', // 这个 dataZoom 组件是 slider 型 dataZoom 组件
startValue: 0, // 从头开始。
endValue: 6, // 一次性展示6个
height: 0, // 组件高度
bottom: 0,
borderColor: '#1d768f',
fillerColor: '#233f62',
showDetail: false, // 即拖拽时候是否显示详细数值信息 默认true
zoomLock: true, // 是否锁定选择区域（或叫做数据窗口）的大小
}
],
xAxis: {
type: "category",
axisTick: {
alignWithLabel: true // 名称对准刻度线
},
// axisLabel: { fontSize: 16, rotate: -30, color: '#333' }, // 坐标轴文本 rotate文字倾斜
// axisLine: { lineStyle: { color: '#ccc' } }, // 坐标轴线
data: seriesData1?.map(v => v.name) || [],
},
yAxis: [{
name: yAxisName1,
type: "value",
// min: 0,
// max: 100,
// interval: 20,
// axisTick: { show: false }, // 坐标轴刻度
// axisLine: { show: false }, // 坐标轴线
// splitLine: { show: false }, // 分隔线
nameTextStyle: {
padding: [0, 40, 0, 0]
}
},
seriesName2 ? {
name: yAxisName2,
type: 'value',
} : null
],
series: [
{
name: seriesName1,
type: "bar",
barWidth: 15,
borderRadius: [10, 10, 0, 0], // 圆角
// showBackground: true,
// backgroundStyle: {
// color: '#262A51',
// },
// 实现数字展示在柱状图
// label: {
// show: true,
// position: 'top',
// color: '#333',
// },
itemStyle: { color: "#3f6cff" },
tooltip: {
valueFormatter: function (value) {
return value + " " + (unit1 || '');
}
},
data: seriesData1,
},
seriesName2 ? {
name: seriesName2,
type: "bar",
barWidth: 15,
itemStyle: { color: "#23b830" },
tooltip: {
valueFormatter: function (value) {
return value + " " + (unit2 || '');
}
},
data: seriesData2,
} : null
]
}
return options
}
/**
* 横向柱状图
*/
interface IXBarConfig {
yData: Array<string>;
data: Array<{ value: string | number, name: string | number }>;
yAxisName?: string;
hideDataZoom?: boolean; // 显示滚动条
barColor?: string; // 柱状颜色
unit?: string; // 单位
grid?: any; // 直角坐标系内绘图网格配置项
}
export const xBarConfig = (config: IXBarConfig) => {
const options = {
tooltip: {
},
grid: {
left: '12%',
right: '4%',
top: '10%',
bottom: '5%',
// containLabel: true
},
xAxis: {
type: 'value',
boundaryGap: [0, 0.01]
},
yAxis: {
name: config.yAxisName || '工单数（单）',
nameTextStyle: {
padding: [0, 40, 0, 0]
},
type: 'category',
data: config.yData || []
},
dataZoom: config.hideDataZoom ? null : [
{
yAxisIndex: 0, // 这里是从X轴的0刻度开始
type: 'slider', // 这个 dataZoom 组件是 slider 型 dataZoom 组件
startValue: 0, // 从头开始。
endValue: 10, // 一次性展示6个
width: 0, // 组件高度
right: 10,
borderColor: '#f0f0f0',
fillerColor: '#f0f0f0',
showDetail: false, // 即拖拽时候是否显示详细数值信息 默认true
zoomLock: true, // 是否锁定选择区域（或叫做数据窗口）的大小
},
],
series: [
{
type: 'bar',
barWidth: 15,
data: config.data || [],
tooltip: {
valueFormatter: function (value) {
return value + " " + (config.unit || '');
}
},
itemStyle: {
color: config.barColor || '#4e87f6',
borderRadius: [0, 4, 4, 0] // 设置圆角
}
}
]
};
// 如果有同名配置则覆盖
Object.keys(options).forEach(key => {
if (config[key]) {
options[key] = config[key]
}
})
return options
}
折线图
line.ts
/**
* 折线图配置项
*/
interface ILineConfig {
yAxisName1?: string; // 左侧Y轴标注
yAxisName2?: string; // 右侧Y轴标注
seriesName1?: string; // 第一组展示数据名称
seriesName2?: string; // 第二组展示数据名称
seriesData1?: Array<{name: string, value: string | number}>; // 第一组展示数据
seriesData2?: Array<{name: string, value: string | number}>; // 第二组展示数据
unit1?: string; // 第一组数据单位
unit2?: string; // 第二组数据单位
}
export const lineConfig = ({ yAxisName1, yAxisName2, seriesName1, seriesName2, seriesData1, seriesData2, unit1, unit2 }: ILineConfig) => {
const options = {
grid: {
left: '2%',
right: '2%',
bottom: '1%',
top: '20%',
containLabel: true,
},
// 鼠标移动提示
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow',
},
valueFormatter: function (value) {
return value + " 单";
}
},
legend: {
icon: 'rect',
itemHeight: 12,
itemWidth: 12,
itemGap: 50,
},
xAxis: {
type: 'category',
// nameGap: 30, // 间距
// boundaryGap: [10, 10], // 坐标轴两边留白策略
// axisLine: {// x轴线的颜色以及宽度
// show: true,
// lineStyle: {
// color: "#263963",
// type: "dashed"
// }
// },
// axisLabel: {//x轴文字的配置
// color: '#C1D5FF'
// },
axisTick: {
alignWithLabel: true, // 文字对齐刻度线
},
data: seriesData1?.map(v=>v.name) || [],
},
yAxis: [
{
name: yAxisName1,
type: 'value',
alignTicks: true, // 自动对齐刻度
// position: "right", // 定位右边
// offset: 30, // 多条y轴加偏移
// nameTextStyle: {
// color: '#C1D5FF',
// padding: [0, -40, 0, 0] // 名称左偏移
// },
// axisLabel: { // y轴文字的配置
// color: '#C1D5FF',
// // formatter: '{value} %'//y轴的每一个刻度值后面加上‘%’号
// },
// axisTick: {
// show: false, // 刻度线
// },
// axisLine: { // y轴线的颜色以及宽度
// show: true,
// lineStyle: {
// color: "#263963",
// type: "dashed"
// },
// },
// splitLine: {// 分割线配置
// show: true,
// lineStyle: {
// color: "#263963",
// type: "dashed"
// }
// }
},
seriesName2 ? {
name: yAxisName2,
type: 'value',
} : null,
],
series: [
{
name: seriesName1,
type: 'line',
// symbolSize: 10, // 圆点大小
// smooth: true, // 平滑曲线
// symbol: 'circle', // 端点
// areaStyle: { // 渐变
// opacity: 0.8,
// color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
// {
// offset: 0,
// color: '#cc2a37'
// },
// {
// offset: 1,
// color: 'rgba(0, 0, 0,0.1)'
// }
// ])
// },
// emphasis: { // 高亮
// focus: 'series'
// },
data: seriesData1,
// itemStyle: {
// color: "#FFD15C",
// lineStyle: {
// type: 'dotted' //'dotted'虚线 'solid'实线
// }
// },
tooltip: {
valueFormatter: function (value) {
return value + " " + (unit1 || '');
}
},
// areaStyle: { // 折线图阴影
// color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
// { offset: 0, color: 'rgba(213,234,242, 0.7)' }, // 起始颜色，可以根据需要修改
// { offset: 1, color: 'rgba(124,181,236,0)' } // 透明色，可以根据需要修改// 结束颜色，可以根据需要修改
// ])
// },
},
seriesName2 ? {
name: seriesName2,
type: 'line',
yAxisIndex: 1,
data: seriesData2,
tooltip: {
valueFormatter: function (value) {
return value + " " + (unit2 || '');
}
},
} : null
]
};
return options;
};
矩形树图
treemap.ts
/**
* 矩形树图配置项
*/
export const treemapConfig = ({data}) => {
const options = {
tooltip: {},
series: [
{
type: 'treemap',
width: '100%',
height: '75%',
top: 12,
breadcrumb: {
show: false // 面包屑
},
roam: false, // 是否开启拖拽漫游
nodeClick: false, // 关闭点击
data: data || [],
levels: [ // 每个层级进行配置
{
itemStyle: {
gapWidth: 5
}
},
{
itemStyle: {
gapWidth: 1
}
},
{
itemStyle: {
gapWidth: 1
}
},
],
label: {
fontSize: 14,
formatter: function (params) {
const arr = [
params.value,
params.name
];
return arr.join('\n');
}
},
}
]
};
return options
}
词云,用户画像
wordCloud.ts
/**
* 词云,用户画像
*/
export const wordCloudConfig = ({data}) => {
const options = {
series: [{
type: "wordCloud",
shape: "circle", //外形
keepAspect: false, // 保持maskImage的宽高比或1:1的形状
left: "center",
top: "center",
width: "70%",
height: "80%",
right: null,
bottom: null,
sizeRange: [12, 60], // 尺寸范围
rotationRange: [0, 0], // 云中文字的旋转角度
// rotationStep: 45, // 旋转步长
gridSize: 8, // 间距
drawOutOfBound: false, // 超出边界
shrinkToFit: false, // 是否收缩文本
layoutAnimation: true, // 执行布局动画。当有大量的单词时，关闭它会导致UI阻塞
textStyle: {
fontFamily: "sans-serif",
fontWeight: "bold",
color: function () {
// Random color
return (
"rgb(" +
[
Math.round(Math.random() * 160),
Math.round(Math.random() * 160),
Math.round(Math.random() * 160)
].join(",") +
")"
);
}
},
emphasis: {
focus: "self",
textStyle: {
textShadowBlur: 10,
textShadowColor: "#333"
}
},
data: data || [],
}]
}
return options
}
封装简化版 vueEchart
实现 option 响应式更新图表 实现监听屏幕 resize 事件刷新图表 实现 dispose 销毁实例 抛出了子项点击事件 clickChart 抛出了图例点击事件 clickLegend
<template>
<div ref="chartRef" :style="{ width, height }"></div>
</template>
<script setup>
import { ref, watch, onMounted, onBeforeUnmount } from 'vue';
import * as echarts from 'echarts';
const emits = defineEmits(['clickChart', 'clickLegend']);
const props = defineProps({
width: { // 宽度
type: String,
default: '100%'
},
height: { // 高度
type: String,
default: '100%'
},
option: { // 配置
type: Object,
required: true
}
});
const chartRef = ref(null);
let chartInstance = ref();
watch(() => props.option, (newVal) => {
if (chartInstance.value) {
chartInstance.value.setOption(newVal);
}
}, {deep: true});
onMounted(() => {
initChart();
window.addEventListener('resize', handleResize);
});
onBeforeUnmount(() => {
disposeChart()
window.removeEventListener('resize', handleResize);
});
/**
* 销毁实例
*/
const disposeChart = () => {
if (chartInstance.value) {
// 方案一: 利用removeAttribute
// chartRef.value.removeAttribute("_echarts_instance_");
// 方案二: 利用echarts.dispose
// echarts.dispose(chartInstance.value);
// 方案三: 利用chartInstance.value.dispose()
chartInstance.value.dispose();
}
};
/**
* 初始化图表
*/
const initChart = () => {
// chartInstance.value = markRaw(echarts.init(chartRef.value));
chartInstance.value = echarts.init(chartRef.value);
chartInstance.value.setOption(props.option);
// 点击事件
chartInstance.value.on('click', (e) => {
emits('clickChart', e)
});
// 点击图例开关
chartInstance.value.on('legendselectchanged', function (params) {
emits('clickLegend', params)
});
};
/**
* 处理窗口大小变化
*/
const handleResize = () => {
if (chartInstance.value) {
chartInstance.value.resize();
}
};
</script>
使用vue-echart组件
vue-echart 可以根据数据响应变化, 可以自动伸缩, 简单实用 使用时要引入 'vue-echarts' 和'echarts'(这个可以在mian.ts全局引入) 需要给容器加高度, 或者父盒子有高度会默认height: 100%
<VEcharts :option="pieOption" autoresize />
import VEcharts from 'vue-echarts';
// 颜色枚举
enum ColorEnum {
'技术服务' = '#0049CF',
'用电保电' = '#0092CB',
'能源服务' = '#009A68',
'综合服务' = '#FAB130'
}
const pieData = ref([]); // 环形图数据
// 计算pie配置
const pieOption = computed(() => {
const params = {
titleName: '诉求工单数(单)',
subTitleName: pieData.value.reduce((sum, { value }) => (sum += value), 0),
pieCenter: ['50%', '50%'],
pieData: pieData.value
}
return pieConfig(params);
})
/**
* 获取数据
*/
const getData = async () => {
...
pieData.value = data.map(v => ({ name: v.name, value: v.value, itemStyle: { color: ColorEnum[v.name] }}))
}
调用环形图
只看百分比的环形图, 没有引线
const option = {
backgroundColor: 'transparent',
title: [{
text: '{a|' + chartData.value + '}{c|%}',
x: 'center',
top: '42%',
textStyle: {
rich: {
a: {
fontSize: 40,
color: props.colors[0],
},
c: {
fontSize: 16,
color: props.colors[0],
}
}
}
}],
polar: {
radius: ['40%', '50%'],
},
angleAxis: {
max: 100,
show: false,
},
radiusAxis: {
type: 'category',
axisLabel: {
show: false,
},
axisLine: {
show: false,
},
axisTick: {
show: false
},
},
series: [
{
name: chartData.name,
type: 'bar',
roundCap: true,
barWidth: 60,
showBackground: true,
backgroundStyle: {
color: props.colors[2],
},
data: [chartData.value],
coordinateSystem: 'polar',
itemStyle: {
color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
offset: 0,
color: props.colors[0]
}, {
offset: 1,
color: props.colors[1]
}]),
}
},
]
}
中间渐变颜色, 外圈虚线, 两个标题
/**
* 添加环形图
* @param {type} 参数
* @returns {type} 返回值
*/
const addRing = ({ container, total, subTitle, data }) => {
let vData = []
for (let i = 0; i < 50; i++) { //生成虚线圆圈
vData.push({
name: i,
value: 1
})
}
const option = {
tooltip: {
trigger: 'item'
},
title: [
{
text: total,
x: '48%',
y: '35%',
textAlign: 'center',
textStyle: {
fontSize: '20',
fontWeight: '700',
},
}, {
text: subTitle,
left: '48%',
top: '55%',
textAlign: 'center',
textStyle: {
fontSize: '14',
fontWeight: '300',
},
}
],
series: [
// 饼图底色底图
{
name: 'baseImg',
type: 'pie',
itemStyle: {
color: function (params) {
return new echarts.graphic.RadialGradient(0.5, 0.5, 3, [{
offset: 0,
color: '#fff'
}, {
offset: 1,
color: '#16a9cc'
}]);
}
},
label: {
show: false
},
labelLine: {
show: false
},
radius: ['0', '60%'],
silent: true,
data: [
{ value: 1, name: '' }
]
},
// 外圈虚线
{
name: 'outline',
type: 'pie',
label: {
show: false
},
labelLine: {
show: false
},
itemStyle: {
color: '#ccc',
borderColor: '#fff',
borderWidth: 2
},
radius: ['85%', '90%'],
silent: true,
data: vData
},
{
type: 'pie',
radius: ['60%', '80%'],
avoidLabelOverlap: false,
itemStyle: {
borderColor: '#fff',
borderWidth: 2
},
label: {
show: false,
position: 'center'
},
labelLine: {
show: false
},
data: data
}
]
};
const el = document.querySelector(container)
addCharts(el, option)
}
调用环形图带引线
引线文字要显示在引线上面, 需要label加入padding属性formatter加上\n\n,labelLine加上length2
自定义环的颜色,data格式要改造成 {name:'test',value: 1, itemStyle: {color: blue}}
const option = {
tooltip: {
trigger: 'item'
},
title: [
{
text: echartsData.value.reduce((arr, cur) => arr + cur.branchTotal, 0),
x: '49%',
y: '40%',
textAlign: 'center',
textStyle: {
fontSize: '26',
fontWeight: '700',
},
}, {
text: '总量(条)',
left: '49%',
top: '52%',
textAlign: 'center',
textStyle: {
fontSize: '16',
fontWeight: '500',
},
}
],
series: [
{
type: 'pie',
radius: ['35%', '55%'],
itemStyle: {
borderColor: '#fff',
borderWidth: 2
},
label: {
formatter: '{unit|{b}}\n\n{value|{c}}{unit|条} {value|{d}}{unit|%}\n\n\n\n',
padding: [0, -90],
rich: {
value: {
fontSize: 16,
},
unit: {
align: 'left',
fontSize: 16,
color: '#333'
}
}
},
labelLine: {
length: 20,
length2: 150,
},
data: echartsData.value
}
]
};
调用柱状图
const option = {
backgroundColor: 'transparent',
legend: {
bottom: '0%'
},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow'
}
},
grid: {
left: '2%',
right: '2%',
top: '12%',
bottom: '0%',
containLabel: true
},
xAxis: [
{
type: 'category',
data: ['10/18', '10/22', '10/26', '10/30', '11/03', '11/07', '11/11', '11/15'],
axisTick: {
alignWithLabel: true
},
axisLabel: {
fontSize: 16,
color: '#333',
interval: 0, // 让所有标签进行展示
width: 55,
overflow: 'truncate' // 超出宽度的文本进行省略
},
axisLine: { lineStyle: { color: '#ccc' } }
}
],
yAxis: [
{
name: '检修单数(条)',
type: 'value',
min: 0,
max: etMaxNum(echartsData.value, 'value', 100),
interval: 20,
nameTextStyle: {
color: '#fff',
padding: [0, 40, 0, 0]
},
axisLabel: {
fontSize: 14,
// formatter: (value: number) => {
// return value + '℃'
// }
},
axisTick: { show: false },
axisLine: { show: false }
},
{
name: '同比(%)',
type: 'value',
min: -50,
max: 50,
interval: 25,
splitLine: {
show: false // 隐藏分割线
},
axisTick: { show: false },
axisLine: {
show: false,
},
}
],
dataZoom: [
{
xAxisIndex: 0, // 这里是从X轴的0刻度开始
type: 'slider', // 这个 dataZoom 组件是 slider 型 dataZoom 组件
startValue: 0, // 从头开始。
endValue: 5, // 一次性展示6个
height: 10, // 组件高度
bottom: 25,
borderColor: '#f0f0f0',
fillerColor: '#f0f0f0',
showDetail: false, // 即拖拽时候是否显示详细数值信息 默认true
brushSelect: false, // 刷选功能，设为false可以防止拖动条长度改变 ************（这是一个坑）
},
],
series: [
{
name: '计划数',
type: 'bar',
barWidth: '15%',
itemStyle: {
color: '#3ba1ff'
},
data: [18, 18, 18, 18, 18, 18, 18, 18]
},
{
name: '完成数',
type: 'bar',
barWidth: '15%',
itemStyle: {
color: '#4ee7ce'
},
data: [18, 18, 18, 18, 18, 18, 18, 18]
},
{
name: '同比',
type: 'line',
smooth: true,
symbol: 'circle',
symbolSize: 6,
showSymbol: false,
yAxisIndex: 1,
lineStyle: {
width: 3,
},
label: {
show: true,
position: 'top',
color: '#fff',
formatter: ({ value }) => (value + props.unit) // 显示数值
},
data: [-2, -10, 5, -5, 5, 0, -3, 0],
itemStyle: {
borderColor: '#FFFFFF', // 白色边框
borderWidth: 2, // 边框宽度
color: '#4ee7ce',
},
emphasis: {
label: {
show: true,
},
},
// areaStyle: { // 折线图阴影
// color: new echarts.graphic.LinearGradient(0, 0, 0, 0.7, [
// { offset: 0, color: 'rgb(9, 139, 53)' }, // 起始颜色，可以根据需要修改
// { offset: 1, color: 'rgba(88, 252, 140, 0)' } // 透明色，可以根据需要修改// 结束颜色，可以根据需要修改
// ])
// },
}
]
};
const el = document.querySelector('.statistics-column')
addCharts(el, option)
调用柱状图2
// html
<div class="query-echart">
<div class="myEchart2" > </div>
</div>
// js
import useEcharts from './useEcharts';
const { addCharts } =useEcharts("myEchart2")
// 柱状图数据
const columnData = ref([
{ name: '02-14', value: 45 },
{ name: '02-15', value: 40 },
{ name: '02-16', value: 55 },
{ name: '02-17', value: 35 },
{ name: '02-18', value: 45 },
{ name: '02-19', value: 40 },
{ name: '02-20', value: 45 },
]);
/**
* 添加charts
* @param {type} 参数
* @returns {type} 返回值
*/
const handleAddCharts = (data) => {
const option = {
backgroundColor: 'transparent',
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow',
},
},
grid: {
left: '2%',
right: '2%',
top: '12%',
bottom: '0%',
containLabel: true,
},
xAxis: [
{
type: 'category',
// 文字颜色
axisLabel: {
color: '#FFF',
},
data: data.map((item) => item.name),
axisTick: {
alignWithLabel: true,
},
},
],
yAxis: [
{
type: 'value',
name: 'kW-h',
// 文字颜色
axisLabel: {
color: '#FFF',
},
nameTextStyle: {
color: '#fff',
nameLocation: 'start',
},
splitLine: {
lineStyle: {
type: 'dashed', //虚线
color: '#E6F7FF33',
},
show: true, //隐藏
},
},
],
dataZoom: [
{
xAxisIndex: 0, // 这里是从X轴的0刻度开始
type: 'slider', // 这个 dataZoom 组件是 slider 型 dataZoom 组件
startValue: 0, // 从头开始。
endValue: data.length - 1, // 一次性展示6个
height: 28, // 组件高度
bottom: 0,
borderColor: '#1d768f',
fillerColor: '#233f62',
showDetail: false, // 即拖拽时候是否显示详细数值信息 默认true
brushSelect: false, // 刷选功能，设为false可以防止拖动条长度改变 ************（这是一个坑）
},
// {
// orient: 'vertical', // 这里是从y轴的0刻度开始
// type: 'slider', // 这个 dataZoom 组件是 slider 型 dataZoom 组件
// startValue: -8, // 从头开始。
// endValue: 6, // 一次性展示6个
// width: 8, // 组件高度
// right: 10,
// borderColor: 'transparent',
// fillerColor: 'rgba(204, 204, 204,0.7)',
// showDetail: false, // 即拖拽时候是否显示详细数值信息 默认true
// brushSelect: false // 刷选功能，设为false可以防止拖动条长度改变 ************（这是一个坑）
// }
],
series: [
{
name: '用电量',
type: 'bar',
showBackground: true,
backgroundStyle: {
color: '#262A51',
},
barWidth: '20%',
data: data.map((item) => item.value),
// 实现数字展示在柱状图
label: {
show: true,
position: 'top',
color: '#fff',
},
itemStyle: {
color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
{
// 四个数字分别对应 数组中颜色的开始位置，分别为 右，下，左，上。例如（1,0,0,0 ）代表从右边开始渐
// 变。offset取值为0~1，0代表开始时的颜色，1代表结束时的颜色，柱子表现为这两种颜色的渐变。
offset: 0,
color: '#4BD2B2',
},
{
offset: 1,
color: '#0FF8F8',
},
]),
},
},
],
};
addCharts({ option });
};
//css
.query-echart {
.myEchart2 {
width: 100%;
height: 400px;
}
}
当echart容器调用--个性签名/用户画像
安装依赖 npm install echarts-wordcloud
// echart.vue引入
import 'echarts-wordcloud';
// html
<div class="draw-content"> </div>
// js
import { ref, onMounted, computed } from 'vue';
import useEcharts from './useEcharts';
const { addCharts } =useEcharts("draw-content")
interface IEchartData {
name: string;
value: number;
textStyle?: {
color: string;
};
}
// echart 数据
const echartData = ref<IEchartData[]>([]);
// color map数组
const colorMap = ref(new Map());
// echart 参数
const option = computed({
get() {
return {
tooltip: {},
series: [
{
type: 'wordCloud',
gridSize: Math.floor(Math.random() * 10),
sizeRange: [16, 30],
rotationRange: [0, 0],
shape: 'circle', //circle cardioid diamond triangle-forward triangle
left: 'center',
top: 'center',
width: '100%',
height: '100%',
drawOutOfBound: false,
shrinkToFit: true,
emphasis: {
textStyle: {
shadowBlur: 10,
shadowColor: '#333',
},
},
data: data,
},
],
};
},
set() {},
});
onMounted(() => {
handleEchartData();
addCharts({ option: option.value });
});
/**
* 处理echart数据, 添加随机颜色
* @param {type} 参数
* @returns {type} 返回值
*/
const handleEchartData = () => {
const data: IEchartData[] = [
{
name: 'Macys',
value: 6181,
},
{
name: 'Amy Schumer',
value: 4386,
},
{
name: 'Jurassic World',
value: 4055,
},
{
name: 'Charter Communications',
value: 666,
},
{
name: 'Chick Fil A',
value: 666,
},
{
name: 'Planet Fitness',
value: 666,
},
{
name: 'Pitch Perfect',
value: 1484,
},
{
name: 'Express',
value: 1112,
},
{
name: 'Home',
value: 965,
},
{
name: 'Johnny Depp',
value: 847,
},
{
name: 'Lena Dunham',
value: 582,
},
{
name: 'Lewis Hamilton',
value: 555,
},
{
name: 'KXAN',
value: 550,
},
{
name: 'Mary Ellen Mark',
value: 462,
},
{
name: 'Farrah Abraham',
value: 366,
},
{
name: 'Rita Ora',
value: 360,
},
{
name: 'Serena Williams',
value: 282,
},
{
name: 'NCAA baseball tournament',
value: 273,
},
{
name: 'Point Break',
value: 265,
},
];
data.forEach((item) => {
const oldColor = colorMap.value.get(item.value);
if (oldColor) {
item.textStyle = {
color: oldColor,
};
} else {
const color =
'rgb(' +
[Math.round(Math.random() * 160), Math.round(Math.random() * 160), Math.round(Math.random() * 160)].join(',') +
')';
colorMap.value.set(item.value, color);
item.textStyle = {
color: color,
};
}
});
echartData.value = data;
};
// css
.draw-content {
height: 170px;
}
仪表盘
const colorList = props.colors.map((v, i) => ({
offset: i * 0.2,
color: v,
}))
const list = colorList.filter(v => v.offset < +props.data[0].value)
const detailColor = list[list.length - 1].color
const option = {
backgroundColor: 'transparent',
series: [
{
type: 'gauge',
startAngle: 178,
endAngle: 2,
center: ['50%', '60%'],
radius: '90%',
min: 0,
max: 1,
splitNumber: 5,
axisLine: {
show: true,
roundCap: true,
lineStyle: {
width: 10,
color: [
[
100, new echarts.graphic.LinearGradient(
0, 0, 1, 0, colorList
]
}
},
pointer: {
icon: 'circle',
length: '15%',
width: 20,
offsetCenter: [0, '-88%'],
itemStyle: {
color: '#fff',
shadowColor: 'rgba(255, 255, 255, 0.8)',
shadowBlur: 10
},
},
axisTick: {
length: 5,
lineStyle: {
color: 'rgb(25, 236, 255)',
width: 1
}
},
splitLine: {
length: 5,
lineStyle: {
color: 'rgb(25, 236, 255)',
width: 1
}
},
axisLabel: {
color: '#9eb1d3',
fontSize: 10,
distance: 15,
formatter: function (value) {
if (value === 0) {
return '0';
} else if (value === 1) {
return '300';
}
return '';
}
},
title: {
offsetCenter: [0, '0%'],
fontSize: 14,
fontWeight: 'bold',
color: '#fff',
},
detail: {
fontSize: 24,
offsetCenter: [0, '-30%'],
valueAnimation: true,
formatter: function (value) {
if (value < 0.25) {
return '优'
} else if (value < 0.5) {
return '良'
} else if (value < 0.75) {
return '差'
} else if (value < 1) {
return '危'
}
return '';
},
color: detailColor
},
data: [
{
value: 0.2,
name: '空气质量分析'
}
]
},
// 背景环
{
name: '',
type: 'pie',
startAngle: 180,
center: ['50%', '60%'],
radius: ['85%', '112%'],
hoverAnimation: false,
label: {
show: false,
},
axisLine: {
show: false,
},
data: [{
value: 5,
name: '',
itemStyle: {
color: 'rgba(63, 229, 232, 0.1)',
opacity: 1
}
},
{
value: 5,
name: '',
itemStyle: {
color: 'transparent',
opacity: 0
}
}
]
},
// 外环
{
name: '',
type: 'pie',
startAngle: 180,
center: ['50%', '60%'],
radius: ['98%', '100%'],
hoverAnimation: false,
itemStyle: {
borderRadius: 10
},
label: {
show: false,
},
axisLine: {
show: false,
},
data: [{
value: 5,
name: '',
itemStyle: {
color: 'rgb(25, 236, 255)',
opacity: 1
}
},
{
value: 5,
name: '',
itemStyle: {
color: 'transparent',
opacity: 0
}
}
]
},
]
};
