一、直接引入echarts
1. 安装echarts项目依赖 npm install echarts --save
2.安装完成后 ECharts 和 zrender 会放在 node_modules 目录下,我们可以直接在项目代码中使用 require(‘echarts‘) 来使用。
或者在main.js中全局引入 import echarts from "echarts"; Vue.prototype.$echarts = echarts;
<template> <div id="app"> <div id="main" style="width: 600px;height:400px;"></div> </div> </template> <script> mounted(){ this. drawChart(); }, methods:{ drawChart(){ var echarts = require(‘echarts‘); // 基于准备好的dom,初始化echarts实例 var myChart = echarts.init(document.getElementById(‘main‘)); // 绘制图表 myChart.setOption({ title: { text: ‘ECharts 入门示例‘ }, tooltip: {}, xAxis: { data: [‘衬衫‘, ‘羊毛衫‘, ‘雪纺衫‘, ‘裤子‘, ‘高跟鞋‘, ‘袜子‘] }, yAxis: {}, series: [{ name: ‘销量‘, type: ‘bar‘, data: [5, 20, 36, 10, 10, 20] }] }); }, } </script>
原文:https://www.cnblogs.com/zhangxingxia/p/14110177.html