1、水滴图，需要安装第三方插件"echarts-liquidfill"
import 'echarts-liquidfill' //需要引入水滴图
var deviceGood = 0.36
//这是echart的配置
const waterChartOptions = ref({
title: {
// text: (num1 * 100).toFixed(2) + '%' + '\n' + '设备完好率',
text: '电梯达标率',
textStyle: {
fontWeight: 'normal',
lineHeight: 25,
fontSize: 14,
color: '#A5DEFF'
},
x: 'center',
y: '46%'
},
series: [
{
type: 'liquidFill',
waveAnimation: false,
animationDuration: 0,
amplitude: 12, //振幅
waveLength: '120%',
radius: '100%',
// center: ['50%', '50%'],
data: [{ value: deviceGood, direction: 'left' }],
color: [
new echarts.graphic.LinearGradient(0, 1, 0, 0, [
{
offset: 0,
color: '#1E81FB'
},
{
offset: 1,
color: '#A5DEFF'
}
])
],
itemStyle: {
opacity: 0.8 //设置normal时候的透明度
},
backgroundStyle: {
borderWidth: 0,
color: 'rgba(13, 16, 45, 0.1)'
},
label: {
formatter: function (param) {
return `${param.value === null ? '--' : transformNum(param.value * 100).decimalStr('round', 1)}%`
},
show: true,
color: '#fff',
insideColor: '#fff',
fontSize: 26,
fontWeight: 'bold',
align: 'center',
baseline: 'bottom',
position: 'inside'
},
outline: {
borderDistance: 0,
itemStyle: {
borderWidth: 2,
borderColor: new echarts.graphic.LinearGradient(0, 1, 1, 0, [
{
offset: 0,
color: '#1E81FB'
},
{
offset: 1,
color: 'rgba(13, 16, 45, 0)'
}
])
}
}
}
]
})
2、在bar图上 添加图片，用到rich
const dataset = {
dimensions: ['yname', '今年', '去年'],
source: [
{ yname: '离职', 今年: 430, 去年: 623 },
{ yname: '就职', 今年: 950, 去年: 980 }
]
}
const barChartOptions ={
xAxis: [
{
type: 'value',//这种value类型 根据数值生成
name: '个'
}],
yAxis: [
{
type: 'category',//这种category是类别
name: 'yname',
}],
series: [ {
name: '去年',
barWidth: 6,
label: {
show: true,
//这里很特别，imgcss是样式，|后面没有内容
formatter: '{imgcss|}{b|{@去年}}',
rich: {
imgcss: {
backgroundColor: {//这就是三角形 bar上的图片
image: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAMCAYAAACqYHctAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAABJSURBVHgBbczRDQAQDEXRMoERjGQEJrOCEYxgA6NUiYi+9H704+SljiXSDWdgIdbNrR5W/VxYRsT29h8mxKk+X8wWRsRKmGBAW1lLXKyEn89GAAAAAElFTkSuQmCC'
}
},
b: {
color: 'red',
padding: [0, 0, 0, 4]
}
},
position: 'right',
distance: 2
},
type: 'bar',
itemStyle: {//bar的样式
normal: {
color: new echarts.graphic.LinearGradient(1, 0, 0, 0, [
{
offset: 0,
color: '#14E1C6'
},
{
offset: 0.49,
color: '#00818C'
},
{
offset: 1,
color: 'rgba(0, 129, 140, 0)'
}
]),
barBorderRadius: 0
}
}
}, {
name: '今年',//其他参考去年
}]
}
最后一种地图
import dataJson from '@/assets/china.json' \\这是中国地图的数据 经纬度数据
onMounted((): void => {
// 注册地图
props.isMap && echarts.registerMap('china', dataJson)
chart = echarts.init(el.value, undefined, { devicePixelRatio: 2 })
chart.setOption(props.options)
for (const { event, handler } of props.events ?? []) {
chart.on(event, handler) //可以给chart添加事件
}
})
let chartOptions = ref({
// geo: {
// // 地理坐标系组件,支持在地理坐标系上绘制散点图、线图
// map: 'china'
// // aspectScale: 0.75,
// // zoom: 1.1
// },
tooltip: {//这是所有省的tooltip
trigger: 'item',
show: false
},
series: [
{
type: 'map',
map: 'china',
left: 0,
right: 0,
selectedMode: false,
// tooltip: {//这是所有省的tooltip
// show: true
// },
label: {
show: false,
color: '#FFFFFF',
fontSize: 16
},
backgroundColor: 'rgba(0,0,0,0)',
// aspectScale: 0.75,
layoutCenter: ['50%', '50%'],
//layoutSize: 100,
// roam: true,
itemStyle: {
normal: {
borderColor: 'rgba(169, 210, 250, 1)',
borderWidth: 1,
areaColor: {
type: 'linear-gradient',
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [
{
offset: 0,
color: 'rgba(1, 164, 255, 0.2)' // 0% 处的颜色
},
{
offset: 1,
color: 'rgba(1, 164, 255, 0.14)' // 50% 处的颜色
}
],
global: true // 缺省为 false
}
},
emphasis: {
//强调 鼠标hover的时候
areaColor: 'rgba(1, 164, 255, 0.2)',
label: {
show: false
}
}
},
data: [
{
name: '广西',
title: '科技园总部',
title2: '未来生产基地',
select: {
disabled: false,
label: {
color: 'red'
}
},
label: {//只是当前数据广西的label
show: true,
formatter: function (params) {
//console.log('params', params)
return '{fline|' + params.data.title + '}\n{sline|' + params.data.title2 + '}'
},
position: 'top',
distance: 0,
backgroundColor: 'rgba(0, 0, 0, 0.5)',
padding: [8, 0],
borderRadius: 3,
// lineHeight: 20,
// verticalAlign: 'middle',
color: '#fff',
z: 11,
rich: {
fline: {
padding: [4, 10],
fontSize: 14
},
sline: {
padding: [4, 10],
fontSize: 14
// color: '#ffffff'
}
},
emphasis: {
//强调 label文字 鼠标hover的时候
color: '#48FFE9'
}
},
itemStyle: {//只是当前数据广西的样式
borderColor: 'rgba(1, 219, 255, 1)',
areaColor: {
type: 'linear-gradient',
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [
{
offset: 0,
color: 'rgba(1, 219, 255, 0.6)' // 0% 处的颜色
},
{
offset: 1,
color: 'rgba(1, 219, 255, 0.43)' // 50% 处的颜色
}
],
global: true // 缺省为 false
},
emphasis: {
//强调 整个省的颜色
areaColor: 'rgba(1, 219, 255, 0.6)'
}
},
tooltip: {//只是当前数据广西的tooltip
show: true,
// position: ['50%', '50%'],
//trigger: 'item',
//triggerOn: 'mousemove',
backgroundColor: 'rgba(6, 20, 58, 0.9)',
borderWidth: 0,
padding: 0,
formatter: function (params) {
//console.log('paramsparamsparams', params)
var html = ''
return html;//此处省略
)
}
}
}
]
}
]
})
