vue项目中Echarts图表的使用

首先，安装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信息，可以再引入，

效果如下：