echart的学习:2.雷达图在vue下的使用
这个系列的博客没什么大的用处,因为echart基本都有范例的了。我只是为了自己能更好的学习下这个插件,而写博客总结下经验准备: 1.导入echart cnpm install echarts(-S)使用步骤: 2.在使用的vue文件中引入echart import echarts from 'echarts' 3.准备容器<d...
·
这个系列的博客没什么大的用处,因为echart基本都有范例的了。我只是为了自己能更好的学习下这个插件,而写博客总结下经验
准备:
1.导入echart
cnpm install echarts(-S)
使用步骤:
2.在使用的vue文件中引入echart
import echarts from 'echarts'
3.准备容器
<div id="main" style="width: 600px;height: 600px;"></div>
4.代码封装在函数里面:
methods: {
drawPie() {
var charts = echarts.init(document.getElementById('echart'))
var option = {
title: {
text: "这个是测试",
link: 'https://www.baidu.com',
target: "blank",
textAlign: 'left',
},
tooltip: {},//提示层
legend: {
data: ['name1']
},
radar: {
name: {
textStyle: {
color: '#fff', //字体颜色
backgroundColor: '#999', //背景色
borderRadius: 3, //圆角
padding: [3, 5] //padding
}
},
center: ['50%', '50%'],
radius: '60%',
startAngle: 270,
indicator: [{
name: '指标一',
max: 600
},
{
name: '指标二',
max: 600
},
{
name: '指标三',
max: 600
}
],
},
series: [{
name: '测试标题名字',
type: 'radar',
data: [{
value: [400, 200, 20],
name: "123"
}]
}]
}
charts.setOption(option);
},
},
5.在钩子中使用
mounted() {
this.$nextTick(function() {
this.drawPie('main')
})
}
解释下四,五的两步流程:
四的流程与上一篇博客在原生的情况下使用的是一样的,主要是在第五步的钩子里面使用,不怎么难,效果大概是这样
参考资料:
1.echart配置项文档:https://echarts.baidu.com/option.html#title
2.echart的示例:https://echarts.baidu.com/examples
更多推荐
已为社区贡献27条内容
所有评论(0)