目录
效果图:
摘要:
在后台管理系统中,我们经常会遇到图表,比如说:柱形图,饼状图,折线图,雷达图等等,而用来写图表插件有很多,我这里主要介绍Echarts在项目里怎么使用,官网地址,详细信息请阅览他们的官网文档和实例,各种图表都比较完善。
一、安装,项目引入
npm install echarts --save
使用流程
1.安装插件 → 2.引入Echarts → 3.创建图表 → 4.修改样式 → 5.接入数据
二、Echarts 基本使用的五个步骤
1、引入 Echarts 文件
2、创建一个容器(必须有宽高)
3、获取 DOM 元素(容器),初始化 Echarts 实例
4、指定图表的配置项和数据
5、使用配置项和数据渲染图表(渲染到容器中)
三、在vue中使用
<template>
<div id="two" style="width: 100%; height: 300px;"></div>
</template>
<script>
import * as echarts from 'echarts';
import { twoo } from "../../../api/compoents";
export default {
data() {
return {
}
},
mounted() {
this.$nextTick(() => {
twoo()
.then((res) => {
this.two(res.data.peopleNum, res.data.ok, res.data.no)
})
.catch((err) => {
console.log(err)
})
})
},
methods: {
two(aa,bb,cc) {
let chartDom = document.getElementById('two');
let myChart = echarts.init(chartDom);
let option;
option = {
title: {
text: "“世界“电影之都”电影展映",
right: "center",
top: "20px",
},
tooltip: {
trigger: 'item',
formatter: '{a} <br/>{b}: {c} ({d}%)'
},
legend: {
data: [
'确定参加',
'暂不确定',
'全部'
],
orient: "vertical",
left: "left",
},
series: [
{
name: '',
type: 'pie',
selectedMode: 'single',
radius: [0, '30%'],
label: {
position: 'inner',
fontSize: 14
},
labelLine: {
show: false
},
data: [
{ value: bb, name: '确定参加' },
{ value: cc, name: '暂不确定' },
// { value: 679, name: 'Marketing', selected: true }
]
},
{
name: '',
type: 'pie',
radius: ['45%', '60%'],
labelLine: {
length: 30
},
data: [
{ value: aa, name: '全部' },
]
}
]
};
option && myChart.setOption(option);
}
},
}
</script>
<style scope></style>
三、关键内容,属性直接属于option
Documentation - Apache ECharts
title:标题组件,包含主标题和副标题
color:全局调色盘
grid:网格布局
xAxis:直角坐标系 grid 中的 x 轴
yAxis:直角坐标系 grid 中的 y 轴
dataset:数据集
visualMap: 把数据的哪个维度映射到什么视觉元素上
最后的效果图如下: