前言
国内和国外都有很多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>
第五步:可选
想要有地图部分,那么再必须引入下面的两个
// 下面两个必须引入
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);