main.js 引入echarts

// 引入echarts
import Echarts from 'echarts'
Vue.prototype.$echarts = Echarts
 
<template>
<div>
<!-- 为ECharts准备一个具备大小(宽高) -->
<div id="ringDiagram" :style="{width: '217px',height:'254px'}"></div>
</div>
</template>
<script>
实现如图效果
 
 

export default {
name: 'cart',
data () {
return {
msg:'这是一个购物车页面',
dataList:[
{value:335, name:'应交人民币'},
{value:310, name:'应交支付宝'},
{value:234, name:'应交微信'},
{value:135, name:'应交信用卡'},
{value:1548, name:'应交其他'}
]
}
},
mounted () {
this.ringDrag();
},
methods:{
ringDrag(){
const _dataList=this.dataList;
//console.log(_dataList)
// 基于准备好的dom,初始化echarts实例
const myChart = this.$echarts.init(document.getElementById('main'));
const option = {
tooltip: {
show:true,
trigger: 'item',
formatter: "{a} <br/>{b}: {c}"
},
legend: {
orient: 'vertical',
left: 8,
// y:'bottom',
// right: '7%',
bottom: '23%',
data:this.dataList.name,
padding:[0,10,0,0],
selectedMode:false,
itemWidth:10,
itemHeight:10,
icon:'circle',
textStyle:{
fontSize:13,
width:160,
rich:{
a:{
align:'left',
color:'#77899c',
padding:[0,0,0,10],
},
b:{
align:'right',
color:'#eb3a53',
},
c:{
align:'right',
color:'#4ed139',
},
}
},
tooltip: {
show: true
},
formatter: function (name) {
let _index=0;
//console.log(_dataList)
_dataList.forEach((item,i)=>{
//console.log(item.value,name)
if(item.name == name){
_index = i;
}
});
let arr;
if(name=='应交人民币'){
arr = [
'{a|'+name+'}',
'{b|¥'+_dataList[_index].value+'}'
]
}else{
arr = [
'{a|'+name+'}',
'{c|¥'+_dataList[_index].value+'}'
]
}
//console.log(_index)
//console.log(_data1[_index].value)
// 注意,换行仍是使用 '\n'。
return arr.join('');
}
},
graphic:{
type:'text',
left:'center',
top:'23%',
z:2,
zlevel:100,
style:{
text:'1244',
x:100,
y:100,
textAlign:'center',
fill:'#77899c',
}
},
series: [
{
// name:'访问来源',
type:'pie',
radius: ['50%', '70%'],
// 绝对位置,相对于容器左侧 10px, 上侧 10 px
// position: [0, -50],
center: [100, 100],
avoidLabelOverlap: false,
hoverAnimation: false,
legendHoverLink:false,
silent:false,
label: {
normal:{
show: false,
position:'center',
formatter:(params)=>{
//var _total=0;
// _total+=params.data.value;
// dataTextArry.forEach((item,i)=>{
// _total+=item.value
// console.log(_total)
// });
//console.log(1);
// console.log(set)
return '1111';
},
},
textStyle:{
fontSize:20,
color:'green'
},
emphasis: {
show: false,
}
},
labelLine: {
normal: {
show: false
}
},
itemStyle:{
color:function(params){
//console.log('1',params)
var colorList=['#4ed139','#289cf4','#fdca57','#ff9e48','#2c3f58']
return colorList[params.dataIndex];
}
},
data:this.dataList
}
]
};
 
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
}
}
}
 

vue 使用Echarts 环形图 自定义legend formatter 富文本标签的更多相关文章

  1. 修改echarts环形图的牵引线及文字位置

    修改echarts环形图的牵引线及文字位置,下面代码及效果不仅如此,也包含了其它的效果哦.有问题可以留言. 根据echarts官方示例修改效果: 官方示例图: 修改效果图: 直接上代码:其它不多说. ...

  2. echarts柱图自定义为硬币堆叠的形式

    看这标题,可能会有一些人不太明白,那么直接上图,就是柱图展示形式如下图(兼容IE8) 要想实现这样展示效果.我们想用echarts直接实现不行的,即使是纹理填充也不可行的,但是我们可以借助echart ...

  3. echarts环形图,自定义说明文字

    一.代码 app.title = '已安装通讯盒电站统计'; option = { backgroundColor: '#0f0f31',//#0f0f31 title: { show:true, x ...

  4. echarts中关于自定义legend图例文字

    formatter有两种形式: - 模板 - 回调函数 模板 使用字符串模板,模板变量为图例名称 {name} formatter: 'Legend {name}' 回调函数 formatter: f ...

  5. echarts环形图点击旋转并高亮

    通过计算某个扇形区域的值占整个圆的百分比来得到这个扇形的角度,从而根据startAngle这个属性来设定图形的开始渲染的角度,使点击某个扇形时圆环旋转使之始终对准某个点. 期间考虑到某扇形区域太小点击 ...

  6. echarts环形图自动定位radius

    根据后台返回数据条数进行pie图radius定位:     var a = 100; var b = 0; var c = 0; var radius = []; for (var i in data ...

  7. Echarts环形进度使用 【1 简单的使用示例】

    使用中说明几点属性:  hoverAnimation:false,//此处查了好久属性//控制鼠标放置在环上时候的交互//这里一个简单的示例使用Echarts 环形图使用方式//常用于统计完成进度等等 ...

  8. vue 结合 Echarts 实现半开环形图

    Echarts 实现半开环形图 1.先看看实现的图 2.HTML部分 创建id 是 chart 的div标签. <div class="content-item"> & ...

  9. echarts白色实心环形图(空心饼图)的编写

    // 数据接入机构统计let myDom = document.getElementById('myChart');let myWidth = myDom.offsetWidth - 5; // 获取 ...

随机推荐

  1. OpenCV中CvMat的初始化[转]

    一)cvCreateMat创建和分配数据CvCreateMat会创建CvMat,并为CvMat分配数据.cvCreateMat可以配合cvInitMatHeader来初始化CvMat对象.因为CvCr ...

  2. 如何使用Git Bash Here,将本地项目传到github上

    申请一个github账号 安装git bash git与git bash的区别: git:版本控制工具,支持该工具的网站有Github.BitBucket.Gitorious.国内的osChina仓库 ...

  3. write命令

    write——给用户发信息,以Ctrl+D保存结束 命令所在路径:/usr/bin/write 示例1: # write xiaohua 执行命令后可以输入需要发送的信息,如下: 同时xiaohua收 ...

  4. linux下怎么修改mysql的字符集编码

    安装完的MySQL的默认字符集为 latin1 ,为了要将其字符集改为用户所需要的(比如utf8),就必须改其相关的配置文件:由于linux下MySQL的默认安装目录分布在不同的文件下:不像windo ...

  5. fclose - 关闭流

    SYNOPSIS 总览 #include <stdio.h> int fclose(FILE *stream); DESCRIPTION 描述 函数 fclose 将名为 stream 的 ...

  6. easyui树节点拖拽排序的存储过程

    easyui树的拖拽排序功能 easyui树中有拖拽功能 树结构如下: 一个行政区域对应一个单位,一个单位对应多个部门,每个部门下有相关人员,功能要求: (1)行政区域没有子节点,点击text加载部门 ...

  7. Nginx代理tcp端口实现负载均衡

    Nginx代理tcp端口实现负载均衡 1.修改配置文件 vi /etc/nginx/nginx.conf 添加如下配置: stream { ###XXX upstream notify {   has ...

  8. 【译】Swift 字符串速查表

    [译]Swift 字符串速查表 2015-12-18 10:32 编辑: suiling 分类:Swift 来源:CocoaChina翻译活动 10 5585 Swift字符串 招聘信息: iOS高级 ...

  9. (45)zabbix报警媒介:SMS

    介绍 服务器安装串口GSM短信猫之后,zabbix可以使用它来发送短信通知给管理员,如下注意事项: 串行设备速度要与GSM猫相匹配(linux下默认为/dev/ttyS0),zabbix无法设置设置串 ...

  10. GIMP中的新建Layer与更改Layer大小

    这边可以直接New Layer,新建一个Layer,还可以New from Visible,第二种是将当前的状态下图像复制出来. 改变Layer的大小,一般的方法两种: Crop to Selecti ...