当前位置:首页 » 存储配置 » vue如何修改echarts饼图配置

vue如何修改echarts饼图配置

发布时间: 2023-01-05 21:47:43

① echarts怎么控制圆饼图的大小

echarts控制圆饼图的大小代码及方法如下:

1、新建静态页面pie.html,并引入echarts核心js文件。

2、在<body></body>元素内插入div饼图容器,设置其宽度和高度。

3、编写生成饼图图形的核心代码,有数据源和样式。

4、预览该静态页面,查看饼图效果,分别点击饼图块。

5、添加饼图块图例切换事件,并打印出饼图参数,更改参数值即可实现圆饼图大小的控制。

6、再次预览该界面,可以查看到饼图效果,并点击饼图分块。

② 在Vue中使用echarts

由于在项目中需要对数据进行可视化处理,也就是用图表展示,众所周知echarts是非常强大的插件。一开始想在网上找一个基于vue封装好的(懒省事),eg:vue-echarts ,但是拉取下来发现,跟项目中使用的类型有点偏差,而且他们的数据大多都是定制好的,我很难在此基础上进行更改(惹不起),于是选择了放弃,最终还是选择echarts。以下是我使用的一些心得体会~

我的示例是在vue-cli搭建

首先需要全局引入
在main.js中

在Echarts.vue中
<div id="myChart" :style="{width: '300px', height: '300px'}"></div>

注意:我们要在mounted生命周期函数中实例化echarts对象。因为我们要确保dom元素已经挂载到页面中

这样一个简单的图表就完成了,是不是觉得很简单?假如在一个大型的项目中,而且数据是非常复杂的?那么该如何操作?

由于全局引入会将所有的echarts图表打包,导致体积过大
在Echarts.vue文件中

使用 require 而不是 import

基于前面的疑问,加上实际运用到项目中遇到的一些问题,我思考使用组件的形式。

从上边可以看出,你每次在使用echarts的时候,都必须要重复的引入,这样很不方便
vue作为一个组件化开发的框架,我们可以使用组件的方式进行集成。每次我们引入组件,进行使用,这样就方便的多。
下面是一个我自己对echarts进行的一个简单的vue组件的集成。
在echarts中
子组件:

props部分是我接收到的参数,父组件获取数据分发,data是父组件分发给echarts的数据源。

父组件:

如果在大型的项目,而且图表又非常的多,那么vuex少不了。如果把数据集中存储到了vuex中,echarts组件再从vuex中获取数据,我们也能随时保存获取的结果,对这些数据可以添加收藏也可以加入缓存中,下次再请求可以先从缓存调用。接下来会继续分享vuex的使用~~~

③ Vue的库Echarts中如何设置饼图的总数

list2=[2, 1, 0, 0, 0, 0]
%>
var myChart = echarts.init(document.getElementById('chart1'));
var option = {
title : {
text: '项目结构分析',
x:'center'
},
tooltip : {
show: true
},
legend: {
orient: 'vertical',
x: "left",

④ vue解决echart饼图比例过小影响交互的问题

如果是正常的圆,只需要在series添加一个属性startAngle,这个属性代表初始的角度,可以设置大一点

如果是南宫玫瑰图这种,计算出最大值,并放大最大值20%(这个值可以自己定),在渲染数据的时候在还原,比如你的数据格式是这样的:

如果数据是这样的那么vpn的数据在图形上显示比例会很小,解决方法:

在渲染数据的时候在label的normal下面还原数据如下:

热点内容
内部存储空间怎么清除 发布:2024-05-21 04:04:55 浏览:497
bilibili不能缓存 发布:2024-05-21 03:31:14 浏览:617
解压剃发 发布:2024-05-21 03:16:27 浏览:641
服务器怎么连接到电脑显示屏上 发布:2024-05-21 02:38:21 浏览:286
织梦安装数据库连接失败 发布:2024-05-21 02:37:45 浏览:259
python编程入门经典pdf 发布:2024-05-21 02:31:45 浏览:7
arm编译添加驱动 发布:2024-05-21 02:02:28 浏览:476
安卓设置页面是怎么 发布:2024-05-21 01:32:51 浏览:521
学生成绩管理系统数据库设计 发布:2024-05-21 01:14:41 浏览:43
我的世界什么指令直接出现服务器 发布:2024-05-21 01:10:00 浏览:397