vuejs2和echarts3组合显示图表

由于echarts3不再通过AMD加载，无需内置echarts变量，所以整合变得简单多了。

echarts成了一个普通的全局变量，可以被vue直接操作

echarts本身就是一个异步组件。所以vue和echarts完全可以是松耦合的。

<!DOCTYPE html>
<html>
<head>
<meta charset="gb2312">
<title>ECharts</title>
<!-- 引入 echarts.js -->
<script src="../js/echarts.min.js"></script>
</head>
<body>
<div id="app-8">
<p>{{ message }}</p>
<input v-model="message">
<button v-on:click="changeData">变换数据</button>
<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
<div id="main" style="width: 600px;height:400px;"></div>
</div>
</body>
<script src="../js/vue.js"></script>
<script>
// 这是我们的Model
var exampleData = {
message: 'Hello Vue.js&Echarts!'
};
var toggle=0;
var exfunction=function () {
this.message = this.message.split('').reverse().join('');
if (toggle  == 0){
category.push("夹克");
sale.push(43);
toggle=1;
}
else{
category.pop();
sale.pop();
toggle=0;
}
myChart.setOption(option);
};
// 创建一个 Vue 实例或 "ViewModel"
// 它连接 View 与 Model
var app6 = new Vue({
el: '#app-8',
data: exampleData,
methods: {
changeData: exfunction
}
})
</script>
<script type="text/javascript">
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));
var category=["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"];
var sale=[5, 20, 36, 10, 10, 20];
// 指定图表的配置项和数据
var option = {
title: {
text: 'ECharts 入门示例'
},
tooltip: {},
legend: {
data:['销量']
},
xAxis: {
data: category
},
yAxis: {},
series: [{
name: '销量',
type: 'bar',
data: sale
}]
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
</script>
</html>

vuejs2和echarts3组合显示图表相关推荐

VTK：在3DScene显示图表用法实战
VTK:在3DScene显示图表用法实战程序输出程序完整源代码程序输出程序完整源代码 #include <vtkActor.h> #include <vtkCamera.h& ...
pyCharm pyplot.show()不显示图表的解决
现象: import pandas as pd from numpy import * import matplotlib.pyplot as plt import matplotlib as mpl ...
工控软件IFIX加入WEB显示图表
工控软件IFIX如何加入WEB并显示图表 1.效果展示 2.编写HTML测试代码其中echarts.js需要自行下载 https://cdn.staticfile.org/echarts/4.7.0 ...
ImageList 、ListView组合显示图片集合
在做一个GoogleEarth中添加图标选择窗体(ImageList .ListView组合显示图片集合),在此给大家分享一下,如果谁有更好的解决方案,可以交流下! 1.保存图片的路径这里要特别注意 ...
excel怎么不显示图表上显示为0%的项？
如何不显示图表中0%的项相信许多小伙伴不想让图表中为0%的项显示(毕竟大多数情况下没有太多意义)那如何不显示呢?废话不多说(这是龚春红老师教我的) 上图片这里图表0%的没必要显示,我们可以添加一行 ...
Tableau工具提示：显示图表
Tableau工具提示可以显示鼠标划过处的详细信息或说明,提高数据的可读性.工具提示中可以插入参数.字段等以显示文字说明信息,还可以插入工作表来显示图表,下面基于"示例-超市"数据 ...
pyecharts+Vue在显示图表
pyechart pyecharts是与python对接的,一个用于生成 Echarts 图表的类库. 为什么用pycharts 说到vue中加图表,大部门肯定是用echarts.我用pyechart ...
c ajax 图表,Pyechart Django：前端和后端分离（Ajax），多图表组合显示,pyechartsdjango,前后,ajax,合并,展示...
pyecharts django 前后端分离(ajax),多图表合并展示先看pyecharts 官方中文网站 pyecharts 官方中文网站了解到官方是有相关关于django支持的代码示例的. ...
react native使用百度echarts显示图表
echarts是百度推出的免费开源的图表组件,功能丰富,涵盖各行业图表.公司项目做h5项目用了不少,最近公司翻新h5页面,用react-native改造,来达到增强用户体验效果的目的.项目中遇到了一些 ...
gojs不显示图表选中边框
点击图表不显示div不显示边框图例,默认点击图表会显示,有颜色的边框,浏览器不同颜色也不同解决方案设置canvas <style type="text/css"> ...

vuejs2和echarts3组合显示图表

vuejs2和echarts3组合显示图表相关推荐

最新文章

热门文章