學習筆記——uni-app如何實現城市聯動
阿新 • • 發佈:2020-12-19
- 直接引入echarts
npm install echarts –save
- 全域性引入
在 main.js 中全域性引入 echarts
//echarts
import echarts from "echarts";
Vue.prototype.$echarts = echarts;
- 建立圖表
<template>
<div id="echarts1" style="width: 600px;height:400px;"></div>
</template>
<script>
export default {
name: "echarts1",
data() {
return {}
},
mounted() {
this.drawChart();
},
methods: {
drawChart() {
// 基於準備好的dom,初始化echarts例項
let myChart = this.$echarts.init(document.getElementById("echarts1" ));
// 指定圖表的配置項和資料
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);
},
}
}
</script>
<style>
</style>
執行專案後發現有報錯
修改引入方式為:
let echarts = require('echarts');
let myChart = echarts.init(document.getElementById("echarts1"));
問題解決