vue-echarts环境构建(包成功)

github上有不少vue+echart的demo，但是对于不会vue的新手来说，还是不太友好的，这里出一个对vue新手比较友好的vue+echart项目构建教程

1.环境准备

需要用到的环境或组件(自行安装)

• node
• npm

node+npm安装

• vscode

vscode官网安装

• vue2

npm install vue

• webpack

npm install webpack webpack-cli –g

• vue-cli

npm install -g vue-cli

测试是否安装成功

node -v
npm -v
vue list

2.项目构建

自行新建一个目录，用来放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

结果截图