VueJs echarts使用
Posted Alex_Mercer
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了VueJs echarts使用相关的知识，希望对你有一定的参考价值。
VueJs echarts使用
栗子
渲染echart一定是要在 mounted 生命周期中使用，created只是创建dom。
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vxe-table/lib/index.css">
<!-- 引入样式 -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/element-ui/lib/theme-chalk/index.css">
</head>
<body>
<div>
<div id="app">
<!--为echarts准备一个具备大小的容器dom-->
asdasdsa
<div id="main" style="width: 600px;height: 400px;"></div>
</div>
</div>
<script src="https://cdn.bootcss.com/echarts/3.7.1/echarts.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"> </script>
<script src="https://cdn.jsdelivr.net/npm/xe-utils"></script>
<script src="https://cdn.jsdelivr.net/npm/vxe-table"></script>
<script src="https://cdn.jsdelivr.net/npm/element-ui/lib/index.js"></script>
<script src="https://cdn.staticfile.org/axios/0.18.0/axios.min.js"></script>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script>
var app = new Vue({
el: ‘#app‘,
data: {
echartData: { 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‘ }] },
},
computed: {//计算属性
},
mounted() {
this.setEchart(‘main‘)
},
methods: {
setEchart(id) {
var echart = echarts.init(document.getElementById("main"));
//echart.setOption(JSON.parse(this.echartData));
echart.setOption(this.echartData);
},
},
})
</script>
</body>
<style>
.vxe-table--body tr td {
border: 1px solid black;
}
#aaa tr td {
border-width: 10;
border-style: double;
border-color: red;
height: 100;
width: 400;
}
</style>
</html>
以上是关于VueJs echarts使用的主要内容，如果未能解决你的问题，请参考以下文章