1.echarts安裝
npm install echarts --save
但是在使用echarts中:npm intsall echarts --save出現錯誤:如下:
百度搜索這個問題,大多說是因爲”權限的問題“,抱着嘗試的心裏去試試
1.wind +R 選擇命令提示符(管理員)
未出現報錯,但是下載速度慢;
我又嘗試用cnpm下載:速度比npm快;
備註: npm他是國外服務器下載,會有點慢,我們會使用國內淘寶鏡像cnpm
安裝淘寶鏡像cnpm
npm install -g cnpm --registry=https://registry.npm.taobao.org
安裝完之後,就可以用cnpm 來替換npm
能下載之後,就可以在項目中使用;
2.在main.js中引入 全局引入
import echarts from 'echarts';
Vue.prototype.$echarts = echarts;
3.創建圖表
關於echarts使用例子可以參考官網https://echarts.apache.org/examples/zh/index.html
<template>
<div id="app">
<div id="echarts" style="width: 600px;height:400px;"></div>
</div>
</template>
export default {
name: "app",
methods: {
drawChart() {
// 初始化echarts實例
let myChart = this.$echarts.init(document.getElementById("echarts"));
// 指定圖表的配置項和數據
let option = {
title: {
text: "ECharts "
},
tooltip: {},
legend: {
data: ["銷量"]
},
xAxis: {
data: ["襯衫", "羊毛衫", "雪紡衫", "褲子", "高跟鞋", "襪子"]
},
yAxis: {},
series: [
{
name: "銷量",
type: "bar",
data: [5, 20, 36, 10, 10, 20]
}
]
};
// 使用剛指定的配置項和數據顯示圖表。
myChart.setOption(option);
}
},
mounted() {
this.drawChart();
}
};
</script>