github上有不少vue+echart的demo，但是对于不会vue的新手来说，还是不太友好的，这里出一个对vue新手比较友好的vue+echart项目构建教程
1.环境准备
需要用到的环境或组件(自行安装)
- node
- npm
- vscode
- vue2
npm install vue- webpack
npm install webpack webpack-cli –g- vue-cli
npm install -g vue-cli测试是否安装成功
node -v
npm -v
vue list2.项目构建
自行新建一个目录，用来放vue项目，然后在vscode中利用命令行生成项目名为echartsvuedemo的模板
vue init webpack echartsvuedemo在安装时会出现一些选项，根据实际情况来选择，这里直接全部回车
初始化安装依赖
npm install安装echarts(这里是vue2的构建步骤，vue3稍有不同请参考vue3-echarts配置)
cd echartsvuedemo
npm install echarts vue-echarts
npm i -D @vue/composition-api修改echartsvuedemo\src\components\HelloWorld.vue的内容
<template>
<v-chart class="chart" :option="option" />
</template>
<script>
import { use } from "echarts/core";
import { CanvasRenderer } from "echarts/renderers";
import { PieChart } from "echarts/charts";
import {
TitleComponent,
TooltipComponent,
LegendComponent
} from "echarts/components";
import VChart, { THEME_KEY } from "vue-echarts";
use([
CanvasRenderer,
PieChart,
TitleComponent,
TooltipComponent,
LegendComponent
]);
export default {
name: "HelloWorld",
components: {
VChart
},
provide: {
[THEME_KEY]: "dark"
},
data() {
return {
option: {
title: {
text: "Traffic Sources",
left: "center"
},
tooltip: {
trigger: "item",
formatter: "{a} <br/>{b} : {c} ({d}%)"
},
legend: {
orient: "vertical",
left: "left",
data: [
"Direct",
"Email",
"Ad Networks",
"Video Ads",
"Search Engines"
]
},
series: [
{
name: "Traffic Sources",
type: "pie",
radius: "55%",
center: ["50%", "60%"],
data: [
{ value: 335, name: "Direct" },
{ value: 310, name: "Email" },
{ value: 234, name: "Ad Networks" },
{ value: 135, name: "Video Ads" },
{ value: 1548, name: "Search Engines" }
],
emphasis: {
itemStyle: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: "rgba(0, 0, 0, 0.5)"
}
}
}
]
}
};
}
};
</script>
<style scoped>
.chart {
height: 400px;
}
</style>修改echartsvuedemo\src\App.vue的内容
<template>
<div id="app">
<router-view/>
</div>
</template>
<script>
export default {
name: 'App'
}
</script>修改echartsvuedemo\build\webpack.base.conf.js
注释掉...(config.dev.useEslint ? [createLintingRule()] : []),这一行
这里是因为开启这个校验规则后，它会将tab与同行缩进进行区分从而导致报错
然后启动
npm run dev结果截图
