vue-echart-ui
vue 集成 echart 图表的小 demo。
基础
series.type
包括：line（折线图）、bar（条形图）、pie（饼图）、scatter（散点图）、graph（图形图）、tree（树状图）等
series.data
在每个系列中声明：option
series.data
echarts包括这些组件：xAxis（笛卡尔坐标系的x轴）、yAxis（笛卡尔坐标系的y轴）、grid（笛卡尔坐标系的底板）、angleAxis（极坐标系的角度轴） ,
radiusAxis（极坐标系的半径轴），polar（极坐标系的底板），geo（GEO坐标系），dataZoom（改变数据显示范围的组件），visualMap（指定视觉对象的组件）映射），
tooltip（工具提示组件）、toolbox（工具箱组件）、series
集成步骤
安装
npm install echarts --save
引用
在main.js 里面引用
import * as echarts from 'echarts'
//局部或全局定义
Vue.prototype.$echarts = echarts
页面效果
静态效果
code 以饼图为例
<div id="pie" style="width: 100%;height: 400px;"></div>
<script>
export default {
/**
* 柱状图
*/
barEcharts() {
var myChart = this.$echarts.init(document.getElementById('bar'))
// 配置图表
var option = {
title: {
text: '标题'
},
//提示框
tooltip: {},
legend: {
data: ['']
},
//x轴显示种类
xAxis: {
data: ['种类一', '种类二', '种类三', '种类四', '种类五', '种类六']
},
//y轴可填数值等
yAxis: {},
series: [{
name: '销量',
type: 'bar',
//y轴数值
data: [5,
{
value: 20,
itemStyle: {
color: '#FFB5C5'
}
}, 36, 10, 10, 20]
}]
}
myChart.setOption(option)
}
}
</script>
注意
需要放在 mounted 。
mounted() {
this.pieEcharts();
}
页面效果
柱状图
饼图
折线图
动态效果
后续更新…
项目地址
Gitee:xiaoxiao-demo 的vue-echart-ui下。需配合layui-echarts 后端接口使用。
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。
文章由极客之音整理，本文链接：https://www.bmabk.com/index.php/post/197521.html
