echarts 官网
特点：
1.丰富的可视化类型图表
2.多数据格式无需转换
3.千万级别数据进行展示
4.移动端优化
5.多渲染方案，跨平台使用
6.深度的交互方案
7.动态数据
8.绚丽的特效
init echarts
-
通过hbuilder 创建一个项目
-
命令行打开项目 npm init
-
引入echarts 命令 npm install echarts --save
核心代码
<template>
<!-- echarts 默认宽高是0，如果不设置宽高，不展示 -->
<div ref="mycharts" style="width: 500px;height:500px;"></div>
</template>
<script>
import * as echarts from 'echarts';
export default {
mounted() {
let myEcharts = echarts.init(this.$refs.mycharts);
// set option
myEcharts.setOption(
{
title:{ //set title
text:'hello world',
},
xAxis:{ //x 轴
data:['EZ','VN','MF','NOC','GL']
},
yAxis: {}, //y 轴
series:{//系列
name:'LOL英雄大全',
type:'bar',//当前图标的类型，bar 柱状图
data:[4800,4800,6300,4800,3150]
}
})
},
data() {
return {
title: 'Hello'
}
},
onLoad() {
},
methods: {
}
}
</script>
<style>
</style>
第一个展示
