1.首先安裝
cnpm install echarts -S
（可能會出現報錯情況，查看node是不是符合，node_modules刪除重新下載）
2.main.js引入
import echarts from "echarts";
Vue.prototype.$echarts = echarts;（原型，在需要的地方引入
let myChart = this.$echarts.init(document.getElementById("myChart"));
）
3.
<div id="myChart" :style="{width: '300px', height: '300px'}"></div>
4.
引入
import echarts from "echarts";
<script>
import todoItem from "./components/listItem"; //引入listItem組件
import echarts from "echarts";
export default {
components: {
todoItems: todoItem
},
name: "App",
data() {
return {
inputData: "",
list: []
};
},
mounted() {
this.drawLine();
},
methods: {
drawLine() {
// 基於准備好的dom，初始化echarts實例
let myChart = this.$echarts.init(document.getElementById("myChart"));
// 繪制圖表
myChart.setOption({
// 柱狀圖
// title: { text: "在Vue中使用echarts" },
// color: ["#3398DB"],
// tooltip: {},
// xAxis: {
// data: ["襯衫", "羊毛衫", "雪紡衫", "褲子", "高跟鞋", "襪子"]
// },
// yAxis: {},
// series: [
// {
// name: "銷量",
// type: "bar",
// data: [5, 20, 36, 10, 10, 20]
// }
// ]
// 餅狀圖
tooltip: {
trigger: "item",
formatter: "{a} <br/>{b}: {c} ({d}%)"
},
legend: {
orient: "vertical",
x: "left",
data: ["直接訪問", "郵件營銷", "聯盟廣告", "視頻廣告", "搜索引擎"]
},
series: [
{
name: "訪問來源",
type: "pie",
radius: ["50%", "70%"],
avoidLabelOverlap: false,
label: {
normal: {
show: false,
position: "center"
},
emphasis: {
show: true,
textStyle: {
fontSize: "30",
fontWeight: "bold"
}
}
},
labelLine: {
normal: {
show: false
}
},
data: [
{ value: 335, name: "直接訪問" },
{ value: 310, name: "郵件營銷" },
{ value: 234, name: "聯盟廣告" },
{ value: 135, name: "視頻廣告" },
{ value: 1548, name: "搜索引擎" }
]
}
]
});
}
}
};
</script>