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 注意事项
原文地址：https://www.cnblogs.com/tongbiao/p/9380026.html