商城网站模板/什么软件可以刷网站排名
目录
- 一:效果图
- 二:环境
- 三:上代码
- 四:巧妙的思路
- 五:结尾
- 六:参考
一:效果图
二:环境
使用了框架(vue),运行下面代码前需要先安装echarts。
-
命令通过 npm 安装 ECharts
npm install echarts --save
-
引入 ECharts
直接在项目代码中var echarts = require('echarts');
得到 ECharts。
三:上代码
<template><div><div id="fourth"></div></div>
</template><script>
// 引入 ECharts 主模块
var echarts = require("echarts/lib/echarts");
require("echarts/lib/chart/pie");
// 引入提示框和标题组件
require("echarts/lib/component/tooltip");
require("echarts/lib/component/title");
export default {data() {return {};},mounted() {this.drawCharts();},methods: {drawCharts() {// 基于准备好的dom,初始化echarts实例var myChart = echarts.init(document.getElementById("fourth"));var e = 80;var option = {title: {show: true,text: e + "%",x: "center",y: "center",// 通过x,y将标题(进度)定位在圆环中心textStyle: {fontSize: "25",color: "white",fontWeight: "400",fontFamily: "DINPro, DINPro-Regular",},},tooltip: {trigger: "item",formatter: "{d}%",show: false,},legend: {orient: "vertical",x: "left",show: false,},series: {name: "",type: "pie",radius: ["65%", "85%"],avoidLabelOverlap: true,hoverAnimation: false,label: {normal: {show: false,position: "center",},emphasis: {show: false,},},labelLine: {normal: {show: false,},},data: [{value: e,name: "",itemStyle: {color: "#6790D8",},},{value: 100 - e,name: "",itemStyle: {color: "transparent",},},],},};myChart.setOption(option);},},
};
</script>
四:巧妙的思路
1.将进度值提到外面,在data
中通过e
和100 - e
,巧妙实现进度条效果。
2.把另一个不需要显示的柱条颜色设为透明transparent
,就完美的实现我们的圆形进度条了。
var e = 80;
data: [{value: e,name: "",itemStyle: {color: "#6790D8",},},{value: 100 - e,name: "",itemStyle: {color: "transparent",},},],
备注:title
的x
和y
属性没有在现在的echarts官方文档中找到,不过不影响使用,有找到的同学可以call我。
五:结尾
我是圆圆,如果我的文章对你的学习成长有所帮助,欢迎 点 赞 👍 支持,您的 点 赞 👍 支持是我进行创作和分享的动力!
如果有问题可以留言评论或者私信我,我都会一一解答~笔芯🤞
六:参考
- 用echarts画圆环图,显示进度条效果_龙马的猫-CSDN博客 https://blog.csdn.net/baidu_39169957/article/details/80567332