文章介绍了如何在Vue项目中下载并引入Echarts库，然后在组件中初始化图表，特别展示了如何创建一个水球图，包括设置radius、colorStops、label等属性，并在mounted阶段调用方法显示图表。最后提到了安装Echarts-liquidfill插件以支持水球图功能。
1.下载echarts
npm install echarts --save
2.vue页面引入echarts，那个页面需要就在那个页面引入
import * as echarts from 'echarts';
3.在method自定义一个方法
echartsMit() {
var myChart = echarts.init(document.getElementById('main'));
var option = {
title: [
{
left: 'center',
top: 'center',
text: '100%',
textStyle: {
fontSize: '20',
fontWeight: '500',
color: '#fff'
}
}
],
series: [
{
type: 'liquidFill',
radius: '100%',
backgroundStyle: {
color: '#0d2d42'
},
color: [
{
colorStops: [
{
offset: 1,
color: '#19a7f7'
}
],
},
],
data: [
{
value: 0.4,
direction: 'left'
},
],
label: {
normal: {
formatter: ''
}
},
outline: {
show: true,
borderDistance: 0,
itemStyle: {
borderWidth: 2,
borderColor: '#2AECFF'
}
}
}
]
};
option && myChart.setOption(option);
4.在mountend中调用方法
5.安装水球图
npm install echarts-liquidfill --save
6.按照以上方法继续使用就OK了
523
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
