Echarts环形图使用
1、官网找图
Echarts官网链接
2、使用
首先要进行下载，打开cmd，输入
npm install echarts --save
如果显示报错，那么使用管理员身份运行cmd。
其次，html中建立盒子，存放这个图标，记住一定要为这个盒子设置长宽。
注意：这里的盒子id为main，底下js代码中 var chartDom = document.getElementById(‘main’)，得到的id要和存放的盒子id相对应。
js中按照以下格式进行使用，其中的import根据需求会有不一样之处。
import * as echarts from 'echarts/core';
import {TooltipComponent, LegendComponent} from 'echarts/components';
import {PieChart} from 'echarts/charts';
import {LabelLayout} from 'echarts/features';
import {CanvasRenderer} from 'echarts/renderers';
echarts.use([
TooltipComponent,
LegendComponent,
PieChart,
CanvasRenderer,
LabelLayout
]);
export default {
// eslint-disable-next-line vue/multi-word-component-names
name: "construction",
mounted() {
this.createChart();
},
methods: {
createChart() {
var chartDom = document.getElementById('main');
var myChart = echarts.init(chartDom);
var option;
option = {
//此处放入官网复制粘贴的图表代码
};
option && myChart.setOption(option);
}
}
}
Echars环形图设置
这是我的目标图表
对于环形图的操作，全部存放在option中。 这里展示代码，在代码中标注位置。
option = {
tooltip: {
trigger: 'item',
formatter: "{a}
{b}: {c} ({d}%)"
},
color:['#051C38','#15C2D9'],//修改图表颜色
//graphic控制环形中间出现字，其中有两个对象，就是两行字
graphic: [{
type: 'text',//控制内容为文本文字
left: 'center',
top: '59px',//调整距离盒子高处的位置
style: {
fill: '#F3DF04',//控制字体颜色
text: '30%',//控制第一行字显示内容
fontSize: '24px',
}
}, {
type: 'text',
left: 'center',
top: '90px',
z: 10,
style: {
text: '投资进度',
font: 'Microsoft YaHei',
fontSize: '14px',
lineHeight: 15,
fill: '#FFFFFF',
}
}],
series: [
{
name: 'Access From',
type: 'pie',
radius: ['60%', '90%'],//在此处控制环的大小，第一个数据为内环，第二个为外环
avoidLabelOverlap: false,
//在这就是控制提示线文字的代码
label: {
normal: {
show: true,//开启提示线文字
position: 'outer',//设置文字的所在的位置
formatter: '{c}亿',//设置展示的内容
borderWidth: 20,//大小设置
borderRadius: 4,
color: '#F3DF04',//文字颜色
rich: {
//设置字体，c代表数据内容，b代表数据名称（这两个都可以在option中的data里面看到）
c: {
fontSize: 16,
lineHeight: 12,
}
},
}
},
emphasis: {
label: {
show: false,
fontSize: 40,
fontWeight: 'bold'
}
},
//设置提示线
labelLine: {
normal: {
show: true,//开启提示线展示
length: 30,//设置第一条提示线长度
length2: 30,//设置第二条提示线长度
lineStyle: {
color: 'white'
}
}
},
data: [
{value: 700, name: '未完成投资'},
{value: 300, name: '已完成投资'},
]
}
]
};
以上就是全部内容，如果有错误之处，欢迎指正！
好文链接
发表评论