【fusioncharts】vue fusioncharts 统计图

版权声明：✎ 本文为博主原创文章，未经博主(老程)允许不得转载。➤ https://blog.csdn.net/weixin_41000111/article/details/82532294

前言

国内和国外都有很多charts的东西。看到很多人使用。里面支持很多流行框架使用。今天偶尔一个朋友正好用这个（这里是使用vue项目搭建的），也让我帮忙看看。今天就把会的东西分享出来，希望能够对大家有帮助。比如做下面的饼状图

注意，npm 里面的一个教程错误的，千万别走坑了：https://www.npmjs.com/package/fusioncharts 。

安装

注意啊，这里是使用vue来讲解下。https://www.fusioncharts.com/dev/getting-started/vue/install-using-vuejs

第一步：安装 vue-fusioncharts

npm install vue-fusioncharts --save

第二步：fusioncharts

npm install fusioncharts --save

第三步：main.js全局引入

// 必须引入 vue-fusioncharts 和 fusioncharts
import VueFusionCharts from 'vue-fusioncharts';
import FusionCharts from 'fusioncharts/core';
// 可选，引入扁平画主题
import FusionTheme from 'fusioncharts/themes/es/fusioncharts.theme.fusion'

// 想显示图形，必须引入图形类型模块。
// 比如饼状图如下
import Pie2D from 'fusioncharts/viz/pie2d'

Vue.use(VueFusionCharts, FusionCharts,FusionTheme , Pie2D); // 添加多个类型图形，就在后面添加上。

第四步：在组件内使用

也就是在页面中使用。官方提供了组件，直接拿过来就可以使用。

<template>
  <div class="hello">
      <!-- 下面是官方给的组件 -->
      <fusioncharts
      :type="type"
      :width="width"
      :height="height"
      :dataFormat="dataFormat"
      :dataSource="dataSource"
      ></fusioncharts>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  data () {
    return {
      type: 'pie2d', // 记住此类型需要在 main.js 内进行添加上
      width: '550',
      height: '350',
      dataFormat: 'json',
      dataSource: {
          "chart": {
              "caption": "Split of revenue by product categories",
              "subCaption": "Last year",
              "numberPrefix": "$",
              "showPercentInTooltip": "0",
              "decimals": "1",
              "useDataPlotColorForLabels": "1",
              //Theme
              "theme": "fusion"
          },
          "data": [{
              "label": "Food",
              "value": "285040"
          }, {
              "label": "Apparels",
              "value": "146330"
          }, {
              "label": "Electronics",
              "value": "105070"
          }, {
              "label": "Household",
              "value": "49100"
          }]
      }
    }
  },
  mounted(){
  },
  methods:{
  }

}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
</style>

• 类型列表 https://www.fusioncharts.com/dev/chart-guide/list-of-charts

第五步：可选

想要有地图部分，那么再必须引入下面的两个

// 下面两个必须引入
import FusionMaps from 'fusioncharts/maps';
import World from 'fusioncharts/maps/es/fusioncharts.world';

// 添加进来
Vue.use(VueFusionCharts, FusionCharts, FusionMaps, World);

第六步：可选

加载其他地图定义文件。您可以使用其他地图文件，但不包括随附的随附的World Map和Map of USAfusioncharts。为此，请安装fusionmaps包含所有映射定义文件的包，如下所示：

npm install fusionmaps

引入

import FusionCharts from 'fusioncharts/core'
import FusionMaps from 'fusioncharts/maps';

比如渲染加利福尼亚州的地图

// 引入地图
import FusionCharts from 'fusioncharts/core';
import FusionMaps from 'fusioncharts/maps';
import California from 'fusionmaps/maps/es/fusioncharts.california';

// 添加到vue
Vue.use(VueFusionCharts, FusionCharts, FusionMaps, California);

• vue的 fusioncharts 案例 （单击我）