附上echart官网链接:
https://www.echartsjs.com/zh/index.html
1、安装echart依赖
npm install echarts --save
2、在main.js中全局引用
import echarts from 'echarts';
Vue.prototype.$echarts = echarts;
3、在需要使用echart的组件中先设置一个带宽高的div
<!--ref用来获取结构,不建议用getElementByxx -->
<div ref="mychart" class="radar"></div>
4、如果是一上来就运行echart的话,在mounted中调用一下,我只写一下具体操作,下面代码是实现一个雷达图。自己调整了颜色,具体颜色可以根据我写的看看是那个部分的进行修改
getEchartData() {
this.chart =this.$echarts.init(this.$refs.mychart);
this.chart.setOption({
// title: {
// text: '自定义雷达图'
// },
legend: {
data: ['图一'],
show:false
},
radar: [
{
indicator: [
{ text: `一` , max:100},
{ text: `二`,max:100 },
{ text:`三` ,max:100},
{ text: `四` ,max:100}
],
center: ['50%', '40%'],
radius: '65%',
startAngle: 90,
splitNumber: 4,
shape: 'circle',
name: {
formatter:'{value}',
textStyle: {
color: '#fff',
backgroundColor:'#E53D3E' ,
borderRadius: 8,
padding: [3, 5],
fontSize:11
}
},
nameGap:5,
splitArea: {
areaStyle: {
color: ['#F3E9E0',
'#EADACC', '#E1CBB7',
'#DDC2A7'],
// shadowColor: 'rgba(0, 0, 0, 0.3)',
// shadowBlur: 10
}
},
axisLine: {
lineStyle: {
color: 'rgba(255, 255, 255, 0.2)',
type:'dashed'
}
},
splitLine: {
lineStyle: {
color: 'rgba(255, 255, 255, 0.1)',
}
}
}
],
series: [
{
name: '雷达图',
type: 'radar',
itemStyle: {
emphasis: {
// color:"#fff",
// lineStyle: {
// width: 3
// }
}
},
animationDuration:2000,
data: [
{
value: ['12','22','33','97'],
name: '图一',
symbol: 'circle',
symbolSize: 6,
lineStyle: {
normal: {
type: 'solid',
color:"#E53D3E",
}
},
areaStyle:{
color:"rgba(229,61,62,0.19)"
},
}
]
},
]
});
},