把echarts饼状图在div中移动位置

本文介绍如何在JavaScript中操作ECharts饼状图,使其在指定的div容器内移动到合适的位置,实现更佳的布局效果。
摘要由CSDN通过智能技术生成
var assetTotalChar = echarts.init(document.getElementById('assetTotalId'));
    var assetTotalOption = {
        tooltip: {
            trigger: 'item',
            formatter: '{a} <br/>{b}: {c} ({d}%)'
        },
        legend: {
            orient: 'vertical',
            right: 30,
            data: ['房产', '林产', '土地', '水产', '其他'],
            formatter: function(data) {
              var i = _this.list[inx].count / _this.assetTotal;
              inx++;
              return data + "    " + (i * 100 + "").substr(0, 4) + "%";
            }
        },
        series: [
            {
                name: '资产类型',
                type: 'pie',
                radius: ['60%', '80%'],
                center: ['30%','50%'],  //第一个百分比是左右移动,50%居中,越小越靠左࿰
  • 3
    点赞
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
实现echarts的步骤如下: 1. 安装echarts库 在Vue项目使用echarts,需要先安装echarts库。可以通过命令行工具在项目根目录下执行以下命令进行安装: ``` npm install echarts --save ``` 2. 引入echarts库 在需要使用echarts的组件,可以通过import语句引入echarts库并声明一个变量来使用。 ```javascript import echarts from 'echarts'; ``` 3. 创建一个容器 在Vue组件,需要先创建一个容器来放置echarts表。可以在模板添加一个div元素,并设置一个id属性。 ```html <template> <div id="chart-container"></div> </template> ``` 4. 初始化表 在Vue组件的mounted钩子函数,可以使用echarts库的init方法初始化一个表,并将其渲染到之前创建的容器。 ```javascript mounted() { // 初始化表 var myChart = echarts.init(document.getElementById('chart-container')); // 设置表配置项 var option = { // 配置项内容 }; // 渲染表 myChart.setOption(option); } ``` 5. 配置表 使用echarts库,可以通过设置option对象来配置表。例如,实现一个简单的,可以设置以下配置项: ```javascript var option = { // 标题 title: { text: '示例', left: 'center' }, // 提示框 tooltip: { trigger: 'item', formatter: '{a} <br/>{b}: {c} ({d}%)' }, // 例 legend: { orient: 'vertical', left: 10, data: ['A', 'B', 'C', 'D', 'E'] }, // 数据 series: [ { name: '数据来源', type: 'pie', radius: '50%', data: [ {value: 335, name: 'A'}, {value: 310, name: 'B'}, {value: 234, name: 'C'}, {value: 135, name: 'D'}, {value: 1548, name: 'E'} ], itemStyle: { emphasis: { shadowBlur: 10, shadowOffsetX: 0, shadowColor: 'rgba(0, 0, 0, 0.5)' } } } ] }; ``` 以上就是在Vue实现echarts的主要步骤。根据实际需要,可以对表的配置进行调整,添加更多的交互效果等。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值