[JavaScript知识库]vue2 与vue-charts结合

charts与vue结合使用有两个方法
一个是 直接引入 npm install echarts --save
https://echarts.apache.org/handbook/zh/basics/import

还有一种是采用封装的的vue组件进行开发
https://github.com/ecomfe/vue-echarts

本次示例采用第二种，其实官方文档已经比较详细了，但没有一个vue2的demo,本人实力不济，走了一点弯路。

由于vue-chart 用到了demi，用来判断当前环境是vue2还是vue3,但不知道为什么在我电脑不会自动判断。所以给他强制指定一下vue版本

npx vue-demi-switch 2

main.js的引入

import Vue from 'vue'
import App from './App.vue'
import ECharts from 'vue-echarts'
import "echarts";
Vue.component('v-chart', ECharts)

Vue.config.productionTip = false

new Vue({
  render: h => h(App),
}).$mount('#app')

app.vue

<template>
  <div id="app">
    <HelloWorld />
  </div>
</template>

<script>
import HelloWorld from './components/HelloWorld.vue'

export default {
  name: 'App',
  components: {
    HelloWorld
  }
}
</script>

<style>
#app {
   height: 600px;
}
</style>

helloworld.vue

<template>
  <v-chart class="chart" :option="option" />
</template>

<script>

export default {
  name: "HelloWorld",
  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>

最后的demo 和代码示例
https://codesandbox.io/s/vue2-echarts-demo-q73wv