vue-webpack 引入echarts 注意事项
Posted 童彪
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了vue-webpack 引入echarts 注意事项相关的知识，希望对你有一定的参考价值。
0.执行教程 https://www.cnblogs.com/goloving/p/8654176.html
1.在index 中创建 div
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>app</title>
</head>
<body>
<div id="app"></div>
<!-- built files will be auto injected -->
<div id="ecarts1" style="width:200px;height:200px" ></div>
</body>
</html>
2.在组件中引入 echarts
<template>
<div>
<HelloWorld></HelloWorld>
<ButtonIvew></ButtonIvew>
</div>
</template>
<script>
import HelloWorld from "./components/HelloWorld";
import ButtonIvew from "./components/button";
export default {
components: {
HelloWorld,
ButtonIvew
},
name: "App"
};
var echarts = require("echarts");
require(\'echarts/chart/line\');
require(\'echarts/chart/bar\');
var option = {
tooltip: {
trigger: \'axis\'
},
legend: {
data: [\'蒸发量\', \'降水量\']
},
toolbox: {
show: true,
feature: {
mark: {
show: true
},
dataView: {
show: true,
readOnly: false
},
magicType: {
show: true,
type: [\'line\', \'bar\']
},
restore: {
show: true
},
saveAsImage: {
show: true
}
}
},
calculable: true,
xAxis: [{
type: \'category\',
data: [\'1月\', \'2月\', \'3月\', \'4月\', \'5月\', \'6月\', \'7月\', \'8月\', \'9月\', \'10月\', \'11月\', \'12月\']
}],
yAxis: [{
type: \'value\',
splitArea: {
show: true
}
}],
series: [{
name: \'蒸发量\',
type: \'bar\',
data: [2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3]
}, {
name: \'降水量\',
type: \'bar\',
data: [2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3]
}]
};
var myChart = echarts.init(document.getElementById(\'ecarts1\'));
myChart.setOption(option);
</script>
<style>
#app {
text-align: center;
margin: 60px;
}
</style>
3.在组件构建完成挂载后执行 生成echarts动作
以上是关于vue-webpack 引入echarts 注意事项的主要内容，如果未能解决你的问题，请参考以下文章