Vue结合Apache Echarts
Vue结合ApacheEcharts
1.通过npm获取ApacheEcharts
npminstallecharts--save2.在main.js引用ApacheEcharts
import*asechartsfrom'echarts';Vue.use(echarts);3.创建Dom
<divid="myChart"style="width:600px;height:400px;"></div>4.创建表图里面的数据
varmyChart=echarts.init(document.getElementById('myChart'));myChart.setOption({xAxis:{//如果绑定vue数据直接this.变量名就可以了data:[2018,2019,2020,2021,this.tip]},yAxis:{},series:[{data:[10,40,28,23,40],type:'line',areaStyle:{}},{data:[25,39,23,35,40],type:'line',areaStyle:{color:'#ff0',opacity:0.5}}]})5.在特定的vue页面引用echarts
<script>import*asechartsfrom'echarts';exportdefault{.......6.初始化页面数据
6.1方法A在mounted初始化
//自启动mounted()varmyChart=echarts.init(document.getElementById('myChart'));myChart.setOption({xAxis:{data:[2018,2019,2020,2021,this.tip]},yAxis:{},series:[{data:[10,40,28,23,40],type:'line',areaStyle:{}},{data:[25,39,23,35,40],type:'line',areaStyle:{color:'#ff0',opacity:0.5}}]})},6.2方法B方法
data(){return{fileList:[],t:null,option:{series:[{type:'pie',data:[{value:335,name:'直接访问'},{value:234,name:'联盟广告'},{value:1548,name:'搜索引擎'}]}]},}},//自启动mounted(){varmyChart=echarts.init(document.getElementById('myChart'));myChart.setOption(this.option)},
访客