table of Contents
Preface
ECharts , an open source visualization library implemented using JavaScript, follows the Apache-2.0 open source protocol and is free for commercial use. Can run smoothly on PC and mobile devices, compatible with most current browsers (IE8/9/10/11, Chrome, Firefox, Safari, etc.), the bottom layer depends on the vector graphics library ZRender, providing intuitive, rich interaction, and highly Personalized customized data visualization chart.
In addition to the PC side, the small program echarts also supports trial
Install dependencies
npm install echarts -save
Global reference
Under main.js
// 引入echarts
import echarts from 'echarts'
Vue.prototype.$echarts = echarts
Write in template in vue
<template>
<div id="app">
<div id="myChart" :style="{
width: '800px', height: '500px'}"></div>
</div>
</template>
Draw the icon we want according to the attributes given by the official website
<script>
export default {
name: 'app',
data () {
return {
}
},
mounted(){
this.drawLine();
},
methods: {
drawLine(){
// 基于准备好的dom，初始化echarts实例
let myChart = this.$echarts.init(document.getElementById('myChart'))
// 绘制图表
myChart.setOption({
title: {
text: '在Vue中使用echarts小demo' },
tooltip: {
},
xAxis: {
data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
},
yAxis: {
},
series: [{
name: '销量',
type: 'bar',
data: [5, 20, 36, 10, 10, 20]
}]
});
}
}
}
</script>
Effect picture
