vue+elementUI中使用Echarts之饼图问题
作者：橘哥哥
这篇文章主要介绍了vue+elementUI中使用Echarts之饼图问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
vue elementUI使用Echarts之饼图
实现效果如图
老规矩先创建占位子的div
<div id="pieReport" style="width: 400px;height: 300px;"></div>
然后引入Echarts,并且模拟数据
export default {
name: "",
data() {
return {
charts: "",
opinion: ["及格人数", "未及格人数"],
opinionData: [
{ value: 12, name: "及格人数", itemStyle: "#1ab394" },
{ value: 18, name: "未及格人数", itemStyle: "#79d2c0" }
]
};
},
}
在methods中定义方法
drawPie(id) {
this.charts = this.$echarts.init(document.getElementById(id));
this.charts.setOption({
tooltip: {
trigger: "item",
formatter: "{a}<br/>{b}:{c} ({d}%)"
},
legend: {
bottom: 10,
left: "center",
data: this.opinion
},
series: [
{
name: "状态",
type: "pie",
radius: "65%",
center: ["50%", "50%"],
avoidLabelOverlap: false,
itemStyle: {
emphasis: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: "rgba(0, 0, 0, 0.5)"
},
color: function(params) {
//自定义颜色
var colorList = ["#1ab394", "#79d2c0"];
return colorList[params.dataIndex];
}
},
data: this.opinionData
}
]
});
},
在mounted中调用
mounted() {
this.$nextTick(function() {
this.drawPie("pieReport");
});
}
懒得写了注释了,将就看吧
echarts饼图、柱状图、折线图 切换
最近自学了一下如何运用echarts制作各种图表，首先我是用springboot+mybatis写的后端。
TypeMapper接口中定义方法如下：
/**
* 查询新闻种类以及数量
* @return
*/
List<Map<Object,Object>> list();
配置NewsMapper.xml文件如下：
<select id="list" resultType="java.util.Map">
select count(*) as num,b.type_name as typeName from t_news a,t_type b where a.type_id=b.type_id group by a.type_id
</select>
我这边写了一个连接求和查询语句，返回值类型为Map类型，接下来常规写TypeService和TypeServiceImpl,这里没什么好说的，跟TypeMapper基本一样哈，接下来写控制类NewsController，简要代码如下：
@RestController
public class TypeController {
@Autowired
private ITypeService typeService;
@RequestMapping("/count")
public List<Map<Object,Object>> list(){
List<Map<Object, Object>> list = typeService.list();
return list;
}
}
这里我是通过跨域获取数据，创建一个TypeChart组件，在index.js配置好路由后，开始以下代码！！
<template>
<div class="chart-container">
<div id="chartPie" style="width:100%; height:550px;"></div>
</div>
</template>
<script>
export default {
name: "Typechart",
data() {
return {
chartPie: '',
typeName: [],//新闻类型名称
typeNum: [] //新闻类型数量
}
},
methods: {
drawPieChart() {
// 基于准备好的dom，初始化echarts实例
this.chartPie = this.$echarts.init(document.getElementById("chartPie"));
this.chartPie.setOption({
//设置标题,副标题,以及标题位置居中
title: {
text: '影片统计(饼状图)',
//subtext: '纯属虚构',
x: 'center'
},
//具体点击某一项触发的样式内容
tooltip: {
trigger: 'item',
formatter: "{a} <br/>{b} : {c} ({d}%)"
},
//左上侧分类条形符
legend: {
orient: 'vertical',
left: 'left',
//通过跨域获取数据给data赋值
data: []
},
//饼状图类型以及数据源
series: [
{
name: '统计数量',
type: 'pie',
//radius: '70%',
//center: ['50%', '60%'],
//通过跨域获取数据给data赋值
data: [],
//设置饼状图扇形区域的样式
itemStyle: {
emphasis: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
},
}
]
});
},
//动态获取饼状图的数据
async initData() {
//url可以在action.js配置，我是学习期间习惯这样哈哈！！
var url="http://localhost:9090/news/count";
this.axios.post(url,{}).then(res=>{
console.log(res.data);
var getData = [];
//先进行赋值
console.log(res.data.length)
//for循环赋值
for(let i=0; i<res.data.length; i++) {
var obj = new Object();
obj.name = res.data[i].typeName;
obj.value = res.data[i].num;
getData[i] = obj;
}
//然后再给饼状图赋值
this.chartPie.setOption({
legend: {
data: res.data.typeName,
},
series:[{
data: getData,
}]
});
})
},
drawCharts() {
this.drawPieChart();
},
},
//页面一加载就调用方法
mounted () {
//先调用这个方法赋值
this.initData();
//再调用饼状图方法
this.drawCharts();
}
}
</script>
<style scoped>
.chart-container {
width: 100%;
float: left;
}
</style>
先说一下async的用法，它作为一个关键字放到函数前面，用于表示函数是一个异步函数，因为async就是异步的意思， 异步函数也就意味着该函数的执行不会阻塞后面代码的执行。
运行后图如下：
完成啦！！！
柱状图也可以根据上面的方法来写！！
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。