一、echarts下载及初始化使用
全局安装cnpm
国内npm下载依赖的速度太慢,一般都会使用cnpm替代能节省不少时间
| npm i -g cnpm --registry=https: |
复制
安装好了就可以使用cnpm来替代npm进行js依赖的下载了
复制
1、下载echarts
可使用 cnpm 或 npm 下载
| npm i echarts -D |
| |
| or |
| |
| cnpm i echarts -D |
复制
2、全局引入echarts
在main.js 中 ,全局挂载echarts
| import * as echarts from 'echarts' |
| Vue.prototype.echarts = echarts; |
复制
3、页面中使用
| <template> |
| <div id="myBarChart"></div> |
| </tremplate> |
复制
JS
| <script> |
| export default { |
| data() { |
| return { |
| myChart: null |
| }; |
| }, |
| mounted(){ |
| this.$nextTick(() => { |
| let chartDom = document.getElementById("myBarChart"); |
| this.myChart = this.echarts.init(chartDom); |
| }) |
| } |
| } |
| </script> |
复制