Echarts data visualization
Chapter 1, Getting Started
1. Installation method
Get it from npm
npm install echarts
2. Introduce Apache Echarts into the project
- 1 npm install ECharts
npm install echarts --save
- 2 Introduce ECharts
import * as echarts from 'echarts';
- 3 Introduce the official echarts example in the project
Copy all to the js part of the vue project mounted
Write a div whose id is main , and set the width and height
<div id="main" style="width:600px;height:300px"></div>
<script type="text/ecmascript-6">
import Chart from 'echarts' //引入echarts 后期调用时写Chart....
export default {
data() {
return {
}
},
mounted() {
//在mounted阶段使用
this.getData()
},
methods: {
getData(){
var chartDom = document.getElementById('main'); //下面有简化写法
var myChart = Chart.init(chartDom);
var option;
option = {
xAxis: {
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
yAxis: {
},
series: [
{
type: 'bar',
data: [23, 24, 18, 25, 27, 28, 25],
// 此系列自己的调色盘。
color:'#91ca8c',
}
]
};
option && myChart.setOption(option);
},
}
};
</script>
Here is the simplified syntax:
var chartDom = document.getElementById('main');
var myChart = Chart.init(chartDom);
var option;
合并写成以下代码:
var myChart = Chart.init(document.getElementById('main'));
var option = {
........}