echarts常见图形-饼状图(四)

饼状图-自动轮播

1.最终效果图
2.echarts文件(jylxfx.js)
3.vue文件中
- 3.1 html
- 3.2 js逻辑处理(引入jylxfx.js)

1.最终效果图

2.echarts文件(jylxfx.js)

export const jylxfxOption = sData => {//   let sData = [//     {//       name: "种植业",//       value: 456//     },//     {//       name: "养殖业",//       value: 231//     },//     {//       name: "畜牧业",//       value: 231//     },//     {//       name: "渔业",//       value: 134//     },//     {//       name: "种养结合",//       value: 421//     },//     {//       name: "林业",//       value: 123//     },//     {//       name: "其他",//       value: 532//     }//   ];let legendData = [];sData.map(item => {legendData.push(item.name);});let option = {textStyle: {fontFamily: "BebasNeue"},color: ["#2970ff", "#774dff", "#ffc000", "#00ddff", "#71f974", "#ffe79a", "#00ddff"],grid: {left: "center",top: "top"},tooltip: {show: false,trigger: "item",formatter: "{b}<br/> {c}  ({d}%)"},legend: {type: "scroll", //分页类型orient: "vertical",left: "65%",top: "middle",textStyle: {color: "#59C9F9"// fontSize: 25},icon: "roundRect",itemWidth: 8,itemHeight: 10,data: legendData},series: [// 主要展示层的{radius: ["40", "48"],center: ["35%", "50%"],type: "pie",avoidLabelOverlap: false,// hoverAnimation: false,label: {position: "center",// formatter: "{b}：{d}%",show: false,formatter(params) {// return "{value|" + params.value + "} \n{name|" + params.data.name + "}";//展示具体值return "{value|" + params.percent + "}%\n{name|" + params.data.name + "}"; //展示百分比},rich: {name: {color: "#7DA7C0",fontSize: 10},value: {fontSize: 18,padding: [0, 5, 0, 0],fontWeight: "bold",lineHeight: 30}}},hoverOffset: 2,// selectedOffset: 2,itemStyle: {borderWidth: 2,borderColor: "#10243C"},emphasis: {label: {show: true,fontSize: "18",fontWeight: "bold"},itemStyle: {// color: "red",// borderColor: "black",// borderWidth: 15}},labelLine: {normal: {show: true,length: 30,length2: 55},emphasis: {show: true}},data: sData},{name: "外边框",type: "pie",clockWise: false, //顺时加载hoverAnimation: false, //鼠标移入变大center: ["35%", "50%"],radius: ["52", "52"],label: {normal: {show: false}},tooltip: {show: false},data: [{value: 1,name: "",itemStyle: {normal: {borderWidth: 0.5,borderColor: "#0b5263"}}}]}]};return option;
};

3.vue文件中

3.1 html

<div style="width:30vh;height:30vh;" ref="jylxfxChart"></div>

3.2 js逻辑处理(引入jylxfx.js)

<script>import { ndfxOption } from "@/assets/js/xxjyzt/ndfx"; //年度分析export default {data(){},methods: {// 经营类型分析jylxfx() {let jylxfxChartEle = this.$echarts.init(this.$refs.jylxfxChart);let sData = [{name: "种植业",value: 456},{name: "养殖业",value: 231},{name: "畜牧业",value: 231},{name: "渔业",value: 134},{name: "种养结合",value: 421},{name: "林业",value: 123},{name: "其他",value: 532}];jylxfxChartEle.dispose();jylxfxChartEle = this.$echarts.init(this.$refs.jylxfxChart);jylxfxChartEle.setOption(jylxfxOption(sData));tools.loopShowTooltip(jylxfxChartEle, jylxfxOption(sData), {loopSeries: false,seriesIndex: 0});},// 初始化图形initEcharts() {let jylxfxChartEle = this.$echarts.init(this.$refs.jylxfxChart); //经营类型分析window.addEventListener("resize", function() {jylxfxChartEle.resize(); //经营类型分析});}},mounted() {this.jylxfx(); //经营类型分析this.initEcharts();}}
</script>

echarts常见图形-饼状图(四)相关推荐

Echarts 柱状图、饼状图等变换颜色、渐变色
Echarts 柱状图.饼状图等变换颜色.渐变色本文只总结了几种用到过的方法,当然,方法远不止这些.以下实测有效.之后如果遇到测试成功的方法,也会对文章进行更新.其中很多参数可以自行测试修改. 方法 ...
【echarts记录 -- 3d 饼状图实现】
echarts记录 -- 3d 饼状图实现实现效果效果1 效果2 代码实现效果效果1 效果2 代码 /************************* pie3D 尝试更新时间: 2020. ...
ECharts数据可视化饼状图(环形图-进度半圆形)
销售进度 (quarter) -饼状图实现步骤: 寻找官方的类似示例,给予分析,引入到HTML页面中按照需求来定制它. 链接: 环形图. 完整js代码 // 销售模块饼形图半圆形设置方式 ( ...
echarts绘制百家姓饼状图
echarts ECharts 是一个使用 JavaScript 实现的开源可视化库,涵盖各行业图表,满足各种需求. ECharts 遵循 Apache-2.0 开源协议,免费商用. ECharts ...
Springboot+poi+thymeleaf 做导入导出用echarts.js做饼状图和树形图
创建一个SpringBoot项目项目架构 pom文件和yml配置 server:port: 8081spring:datasource:driver-class-name: com.mysql.cj ...
php链接echarts教程,图文详解echarts的使用方法（饼状图实例）
在页面布局时经常需要插入一些图表,比如饼状图,柱状图,地图等等,但是这些代码比较难写,因此我们通常会用借助echarts,那你知道如何使用echarts吗?这篇文章就和大家讲讲echarts的使用方法 ...
Echarts 3d饼状图
记录使用Echarts 实现3D饼状图的过程. 效果图: 1.首先安装echarts 3d插件 "echarts": "^4.7.0", "echar ...
echarts饼状图设置label的交互效果，饼状图鼠标浮上图形才显示label和视觉引导线
echarts饼状图默认label和视觉引导线效果: 这个效果没有没有形成与用户的交互,此时添加如下设置: label: {show: false,position: 'outside'},empha ...
SpringBoot+MyBatisPlus+Echarts实现查询并显示平均时长占比饼状图
场景数据库中每个数据都有开始时间以及结束时间两个字段. 需要根据创建时间筛选出当天的四种类型的数据的平均执行时间. SpringBoot+Echarts实现请求后台数据显示饼状图: https:// ...
SpringBoot+Echarts实现请求后台数据显示饼状图
场景 SpringBoot搭建后台获取数据,前端可视化使用echarts的饼状图. Echarts3官网: https://www.echartsjs.com/index.html 获取Echarts ...

echarts常见图形-饼状图(四)

饼状图-自动轮播

1.最终效果图

2.echarts文件(jylxfx.js)

3.vue文件中

3.1 html

3.2 js逻辑处理(引入jylxfx.js)

echarts常见图形-饼状图(四)相关推荐

最新文章

热门文章