import * as echarts from 'echarts'mounted() {let myChart = echarts.init(document.querySelector('.echarts-pie'))myChart.setOption({color: ['#1890FF', '#00D7ED', '#FFCF5F', '#FF235F'], // 提示图标的颜色 和data一一对应tooltip: {trigger: 'item', // 提示框触发类型 可选 item（散点，饼图） | axis（柱状，折线） | nonetriggerOn: 'mousemove', // 点击图标显示提示 默认mousemove 'mousemove'鼠标移动时触发。enterable: false, // 鼠标是否可进入提示框浮层中，默认为 false，如需详情内交互，如添加链接，按钮，可设置为 trueshowDelay: 20, // 显示延迟，添加显示延迟可以避免频繁切换，单位mshideDelay: 100, // 隐藏延迟，单位mstransitionDuration: 0.4, // 动画变换时间，单位sborderRadius: 4, // 提示边框圆角，单位px，默认为4backgroundColor: '#FFFFFF', // 提示框浮层的背景颜色。borderColor: '#333', // 提示框浮层的边框颜色。borderWidth: 0, // 提示框浮层的边框宽。padding: 5, // 提示框浮层内边距，textStyle: { // 提示框浮层的文本样式。color: 'green',fontStyle: 'normal',fontWeight: 'normal',fontFamily: 'sans-serif',fontSize: 14},extraCssText: 'box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);', // 额外附加到浮层的样式 margin,opacity,甚至上面的padding那些也可以些这里formatter: "{a}
{b} : {c} ({d}%)", //a代表图例的名称 b代表选择属性的名称 c代表选择属性的值 d代表所占百分比// 插入一个图例// formatter: function(param) {// // 传参选择图例的各个属性param// setTimeout(function() {// // 接收参数和挂载echarts图例的dom节点// that.childRegByChart(param, 'regChart')// }, 100)// // 定义一个挂载图例的div// var res = ""// return res// },// childRegByChart(param, ele) {// this.childrenData = []// for (const i in name) {// this.childrenData.push({// value: name[i].data,// name: name[i].seriesName// })// }// var myChart = this.$echarts.init(document.getElementById(ele))// myChart.setOption({// // 里面正常设置图例的属性和数据// })// }},toolbox: { // 可视化的工具箱show: true,feature: {dataView: { // 数据视图show: true},restore: { // 重置show: true},dataZoom: { // 数据缩放视图show: true},saveAsImage: {// 保存图片show: true},magicType: {// 动态类型切换type: ['bar', 'line']}}},title: {// 是否显示show: true,// 主标题文本，'\n'指定换行text: 'title',// 副标题文本，'\n'指定换行subtext: '纯属虚构',// 水平安放位置，默认为左侧，可选为：'center' | 'left' | 'right' | {number}（x坐标，单位px）x: 'center',// 垂直安放位置，默认为全图顶端，可选为：'top' | 'bottom' | 'center' | {number}（y坐标，单位px）y: 'top',// 水平对齐方式，默认根据x设置自动调整，可选为： left' | 'right' | 'centertextAlign: 'center',backgroundColor: '#ADFADF', // 标题背景色borderWidth: 1, // 标题边框线宽，默认为0无边框borderColor: 'red', // 标题边框颜色padding: 5, // 标题内边距，默认各方向内边距为5，接受数组分别设定上右下左边距itemGap: 20, // 主副标题纵向间隔，单位px，默认为10textStyle: { // 主标题样式fontSize: 26,fontWeight: 'bolder',color: 'black'},subtextStyle: { // 副标题样式fontSize: 16,fontWeight: '400',color: '#cccff'}},legend: {type: "plain", // 提示的类型 'plain':普通图例 'scroll':可滚动翻页的图例zlevel: 1, // 所有提示的 zlevel 值itemGap: 50, // 提示的样式每项间隔x: '90%', // 提示的样式到图的距离icon: 'circle', // 提示的样式 圆点 circle, 正方形 rect, 圆角方形 roundRect, 三角triangle, 菱形diamond, 倒水滴pin, 箭头型arrow, 没有nonetop: '10%', // 提示到上部距离width: "auto", // 提示的宽度,可以设置值，百分比数值都行height: "auto", // 提示的高度orient: "horizontal", // 提示的布局朝向 'horizontal' 'vertical'align: "auto", // 提示标记和文本的对齐padding: 5, // 提示内边距itemWidth: 18, // 提示图标宽度itemHeight: 18,selectedMode: true, // 提示是否可以点击选择的模式inactiveColor: "#ccc", // 提示关闭时的颜色textStyle: { // 提示文字的样式color: 'red',fontSize: 12,rich: {a: {color: "red",lineHeight: 10,},b: {color: "#fff",lineHeight: 10,},//rich要结合formatter使用}}},series: [{name: 'Access From',type: 'pie',radius: ['50%', '70%'], // 中间白色圆周面积center: ['50%', '60%'], // 整个图左右距离hoverAnimation: true, // 鼠标放在图片上放大minAngle: 3, // 防止某个值过小导致扇区太小影响交互avoidLabelOverlap: false,label: {show: false, // 折点显示数值position: 'center'},itemStyle: { // 环形图中间加白条borderWidth: 3,borderColor: '#fff'},emphasis: {label: {show: true,fontSize: '16'// fontWeight: 'bold'}},labelLine: {show: false},data: [{ value: 3, name: '住宅' },{ value: 8, name: '商用' },{ value: 3, name: '办公' },{ value: 5, name: '出租' }]}]})// echarts 自适应window.addEventListener('resize', () => {myChart.resize()})},
本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！
