/ / you must introduce vue-fusioncharts and fusioncharts
import VueFusionCharts from "vue-fusioncharts";
import FusionCharts from" fusioncharts/core";
/ / optional, and introduce the flat drawing theme
import FusionTheme from "fusioncharts/themes/es/fusioncharts.theme.fusion"
/ / if you want to display graphics, you must introduce a graphic type module.
/ for example, the pie chart is as follows:
import Pie2D from "fusioncharts/viz/pie2d";
import Column2D from" fusioncharts/fusioncharts.charts";
Vue.use (VueFusionCharts, FusionCharts,FusionTheme,Pie2D, Column2D); / / add multiple types of graphics and add them later.
according to the introduction of import FusionCharts from "fusioncharts/core"; core in the document, some people said that they should bring it to the official website without
.< div id= "chart-container" >
<fusioncharts
:type="type"
:width="width"
:height="height"
:dataformat="dataformat"
:datasource="datasource"
>
</fusioncharts>< / div >
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"
}]
}
}
the data is followed, but the chart does not come out and there is an endless loop
below is the address
https://www.fusioncharts.com/.