通过npm引入的echart目录_Echarts简单入门使用

安装Echarts插件

首先创建好一个vue项目之后，在运行命令窗口中下载Echarts插件

npm install echarts --save

引入Echarts

在项目根目录找到main.js入口文件进行引入

import echarts from 'echarts' //引入echarts

Vue.prototype.$echarts = echarts //将echart添加到vue的原型上

创建图表

创建一个 .vue 页面对 Echarts 柱状图进行一个简单的展示

export default {

name: "EchartPractice",

methods: {

drawChart() {

let myEchart = this.$echarts.init(document.getElementById("main"));

let option = {

title: {

text: "Vue中使用Echarts小练习",

},

tooltip: {},

legend: {

data: ["销量"],

},

xAxis: {

data: ["苹果", "香蕉", "橘子", "葡萄"],

},

yAxis: {},

series: [

{

name: "销量",

type: "bar",

data: [50, 60, 45, 30],

},

],

};

myEchart.setOption(option);

},

},

mounted() {

this.drawChart();

},

};

#main {

width: 600px;

height: 400px;

margin: auto;

margin-top: 100px;

}

标签：插件,vue,入门,Echarts,简单,main,data,echarts

来源： https://blog.csdn.net/Shids_/article/details/111769757