首先,安装Echarts。
npm install echarts --save
在入口js文件main.js引入的话得到的是已经加载了所有图表和组件的 ECharts 包,会造成打包体积比较大。所以在这里只介绍按需引入需要的模块。例如在页面中这样引用:
method方法:
drawLine方法的完整代码如下,可供参考:
drawLine(){
let myChart = echarts.init(document.getElementById('myChart'));
myChart.setOption({
title: {
text: "极坐标双数值轴"
},
legend: {
data: ["line"]
},
polar: {
center: ["50%", "54%"]
},
tooltip: {
trigger: "axis",
axisPointer: {
type: "cross"
}
},
angleAxis: {
type: "value",
startAngle: 0
},
radiusAxis: {
min: 0
},
series: [
{
coordinateSystem: "polar",
name: "line",
type: "line",
showSymbol: false,
data: [200,300,400,500,600,700,800]
}
],
animationDuration: 2000
})
}
然后在钩子函数mounted中调用drawLine方法:
效果如下:
如果想显示title和legend信息,可以再引入,
效果如下: