问题:页面需要一张图表表示数据
解决:
下载echarts文件
//使用的页面引入文件
import echarts from "../../../static/js/echarts.min.js";
template
<div id="main" style="width: 300px; height: 300px"></div>
script
data(){
value: ["0.0", "0.0", "0.0", "0.0", "0.0"],
indicator: [
{ name: "师资力量", max: 5 },
{ name: "环境设施", max: 5 },
{ name: "课程质量", max: 5 },
{ name: "喜爱程度", max: 5 },
{ name: "性价比", max: 5 },
]
}
mouted
mouted(){
this.$nextTick(() => {
this.drawPie("main");
});
}
methods
methods:{
drawPie() {
var charts = echarts.init(document.getElementById("main"));
var option = {
rotation: "90",
color: "#ff6700",
splitLine: {
lineStyle: {
color: "#333",
},
},
radar: {
center: ["60%", "50%"],
radius: ["0%", "42%"],
name: {
textStyle: {
color: "#333",
padding: [3, 5],
},
},
indicator: this.indicator,
},
series: [
{
name: "学生评价",
type: "radar",
// areaStyle: {normal: {}},
data: [
{
value: this.value,
name: "学生评价",
},
],
},
],
};
charts.setOption(option);
},
}
//使用时直接引入,具体数据修改data内容;
//如果安装了echarts依赖,可直接引入,不用再引入echarts文件,否则可能发生冲突。