Maison > Article > interface Web > Introduction à deux façons d'utiliser Echarts dans Vue
Cet article présente principalement les deux façons d'utiliser Echarts dans Vue. Cet article vous présente de manière très détaillée et a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer
1.
Première installation de npm echarts
npm install echarts --save
Développement :
main.js
import myCharts from './comm/js/myCharts.js' Vue.use(myCharts) myCharts.js /** * 各种画echarts图表的方法都封装在这里 */ import echarts from 'echarts' (function() { var chart = {}; chart.install = function(vue) { vue.prototype.$chart = { //画一条简单的线 line1: function(id) { this.chart = echarts.init(document.getElementById(id)); this.chart.clear(); const optionData = { xAxis: { type: 'category', data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'] }, yAxis: { type: 'value' }, series: [{ data: [820, 932, 901, 934, 1290, 1330, 1320], type: 'line', smooth: true }] }; this.chart.setOption(optionData); }, } } if(typeof exports == 'object') { module.exports = chart } })() hello.vue ... <p id="chart1"></p> ... mounted() { this.$chart.line1('chart1'); },
2. echarts
Première installation de npm vue-echarts
npm install vue-echarts
développement :
main.js
import ECharts from 'vue-echarts/components/ECharts' import 'echarts/lib/chart/bar' import 'echarts/lib/component/tooltip' Vue.component('chart', ECharts) hello.vue ... <chart ref="chart1" :options="orgOptions" :auto-resize="true"></chart> ... data: function() { return { orgOptions: {}, } }, ... mounted() { this.orgOptions = { xAxis: { type: 'category', data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'] }, yAxis: { type: 'value' }, series: [{ data: [820, 932, 901, 934, 1290, 1330, 1320], type: 'line', smooth: true }] } }
Ce qui précède est l'intégralité Nous espérons que le contenu de cet article sera utile à l'étude de chacun. Pour plus de contenu connexe, veuillez prêter attention au site Web PHP chinois !
Recommandations associées :
Introduction à plusieurs méthodes d'importation couramment utilisées dans VUE (modules, fichiers)
Comment définir l'autorisation de connexion pour le routage dans vue
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!