<强> 1。直接引入echarts
先npm安装echarts
npm安装echarts——保存
开发:
main.js
从“进口myCharts。/通讯/js/myCharts.js”
Vue.use (myCharts)
myCharts.js/* *
*各种画echarts图表的方法都封装在这里
*/从“echarts”进口echarts
(函数(){
var图={};
图表。安装=function (vue) {
vue.prototype。$图={//画一条简单的线
line1:函数(id) {
这一点。图=echarts.init (. getelementbyid (id));
this.chart.clear ();
const optionData=https://www.yisu.com/zixun/{
xAxis: {
类型:“类别”,
数据:[“我的”,“星期二”,“结婚”、“清华”、“星期五”,“坐”,“太阳”)
}，
桠溪:{
类型:“价值”
}，
系列:[{
数据:(820,932,901,934,1290,1330,1320]。
类型:“行”,
平滑:真
})
};
this.chart.setOption (optionData);
}，
}
}
如果(typeof出口=='对象'){
模块。出口=表
}
}) ()
hello.vue
…
& lt; div id=" chart1 "祝辞& lt;/div>
…
安装(){
chart.line1美元。(“chart1”);
},
<强> 2,使用vue-echarts
先npm安装vue-echarts
npm安装vue-echarts
开发:
main.js
从“vue-echarts/组件/导入ECharts ECharts”
导入“echarts/lib/图表/酒吧”
导入“echarts/lib/组件/工具提示”
Vue.component(“图表”,ECharts)
hello.vue
…
& lt;图表ref=癱hart1”:选项=皁rgOptions”:自动调整大?" true "祝辞& lt;/chart>
…
数据:函数(){
返回{
orgOptions: {},
}
}，
…
安装(){
this.orgOptions={
xAxis: {
类型:“类别”,
数据:[“我的”,“星期二”,“结婚”、“清华”、“星期五”,“坐”,“太阳”)
}，
桠溪:{
类型:“价值”
}，
系列:[{
数据:(820,932,901,934,1290,1330,1320]。
类型:“行”,
平滑:真
})
}
}
以上所述是小编给大家介绍的Vue中使用Echarts的两种方式,希望对大家有所帮助,如果大家有任何疑问请给我留的言,小编会及时回复大家的。在此也非常感谢大家对网站的支持!
