echarts 饼图移动端_VUE移动端项目中使用Echart
安装Echart依赖
npm install echarts -save
在main.js中引入
// 引入echarts
import echarts from 'echarts'
Vue.prototype.$echarts = echarts
在组件中使用
// 基于准备好的dom,初始化echarts实例 写在 mounted()里面
let sum_earnings = this.$echarts.init(
document.getElementById("sum_earnings")
);
this.drawLin( sum_earnings);
//写在methods方法里面封装然后在,在mounted()里面调用个人比较喜欢这种的写法,方便封装
drawLine: function(name) {
// 绘制图表
name.setOption({ '代码块(option里面的)' })
}
关于响应式
// 需要在mounted()方法里面初始化echarts实例之后调用
window.onresize = function() {
实例的名字.resize();
};
我用到的代码及注释
折线图
折线图.png
// 绘制图表
name.setOption({
// 提示框
tooltip: {
trigger: "axis" // 坐标触发
},
// 图表的标注
legend: {
// 标注前面的形状这个是圆形
icon: "circle",
// 数据名称
data: ["FIL", "TIC"],
// y轴的位置 可选 top center bottom x轴同理
y: "bottom"
},
// 图形在画布的距离
grid: {
top: 10
},
// x轴的数据
xAxis: {
type: "category",
boundaryGap: false,
data: ["01", "02", "03", "04", "05", "06", "07"]
},
// y轴的数据
yAxis: {
type: "value"
},
// 折线图 (写几条折线图就写几个对象;是这个{}对象)
series: [
{
name: "FIL",
type: "line",
stack: "总量",
data: [12, 13, 10, 13, 9, 23, 21],
color: "#ffb54c"
},
{
name: "TIC",
type: "line",
stack: "总量",
data: [20, 12, 11, 24, 29, 33, 31],
color: "#9186fc"
}
]
});
饼状图(环形图)
环形图.png
name.setOption({
// 移入显示文字
tooltip: {
trigger: 'item', // 项目触发
formatter: "{a}
{b}: {c} ({d}%)"
},
// 图解 可以设置在圆环图的中心
graphic: {
type: "text",
left: "center",
top: "center",
z: 2,
zlevel: 100,
style: {
text: "你好",
fontSize: 36,
x: 100,
y: 100,
textAlign: "center",
fill: "#f00",
width: 100,
height: 100
}
},
// 左侧提示 图表的标注
legend: {
orient: 'vertical',
x: 'left',
data:['直接访问','邮件营销','联盟广告','视频广告','搜索引擎']
},
series: [
{
name: "访问来源",
// 显示成饼状
type: "pie",
// 内环和外环的大小
radius: ["50%", "70%"],
avoidLabelOverlap: false,
// 主标题
label: {
normal: {
// 是否默认显示文字
show: false
// position: 'center'
},
emphasis: {
// 移入是否显示文字
show: false, // 不显示
// 文字类型
textStyle: {
fontSize: "30",
fontWeight: "bold"
}
}
},
// 是否显示连接线
labelLine: {
normal: {
show: false
}
},
// 每一个饼状图的信息
data: [
{ value: 335, name: "直接访问" },
{ value: 310, name: "邮件营销" },
{ value: 234, name: "联盟广告" },
{ value: 135, name: "视频广告" },
{ value: 1548, name: "搜索引擎" }
]
}
]
});
echarts 饼图移动端_VUE移动端项目中使用Echart相关推荐
- echarts中graphic_vue项目中引入echart 调用其graphic方法报错的问题
index.js中引入echart 在页面当中想要使用echart方法 const lineOpts = { //鼠标移上去时的提示框 tooltip: { trigger: 'axis', text ...
- taro 项目中接入EChart图表库
1.使用物料市场提供的封装好的组件 https://taro-ext.jd.com/plugin/view/5f648e4c0dd8313026e0942d npm i echarts-taro3-r ...
- spring 项目中集成 Protocol Buffers 示例
http://blog.csdn.net/fangzhangsc2006/article/details/8687388 本文适用于了解spring框架,同时想在spring项目中使用Protocol ...
- uni-app项目中H5跨域小程序不跨域怎么解决方法(兼容H5、小程序)
解决这个问题的时候还是用到了之前的文章中提到的"条件编译",当然这只是其中一部分, 下面我们来看一下这种问题的解决方法, ①H5端配置 首先在项目中找到一个名为"mani ...
- TypeScript及TypeScript在vue3.0项目中的基本使用
一. TypeScript是什么 TypeScript 是一种由微软开发的自由开源的编程语言,主要提供了类型系统和对 ES6的支持.它是JavaScript的一个超集,扩展了JavaScript的 语 ...
- Antv | G2-Plot图表在vue项目中的使用
什么是G2-Plot G2Plot 是一套简单.易用.并具备一定扩展能力和组合能力的统计图表库,基于图形语法理论搭建而成,"G2Plot"中的 G2 即意指图形语法 (the Gr ...
- vue怎么vw布局好用_Vue项目中使用vw实现移动端适配-阿里云开发者社区
我们在vue移动端项目中的适配一般都采用rem,但是rem也不是能兼容所有的终端. 随着viewport单位越来越受到众多浏览器的支持,下面将简单介绍怎么实现vw的兼容问题,用vw代替rem 当我们采 ...
- vue 移动端点击延迟_vue移动端项目-click事件在浏览器中延迟300ms的解决方法
在H5页面移动端项目当中,click事件在浏览器中会有300ms的延迟,这个也是移动端开发中常见的问题之一,今天就这个问题说一说解决方法 解决click点击事件300ms延迟-fastClick fa ...
- echarts 饼图移动端_echarts饼图--数据交互
/*饼图 鼠标经过时模块放大功能 */ // 路径配置 require.config({ paths: { echarts: 'js/' } }); // 使用 require( [ 'echarts ...
最新文章
- 分布式环境下的并发问题
- 网页与APP中那些优美的登陆表单
- jquery datatable的详细用法
- String equals()方法 源码分析
- 更新elementui图标不显示_elementUI字体图标不显示问题
- [导入]DataTable的排序、检索、合并
- 操作系统的不确定性是指_读文||不确定性原理—人工智能的哲学基础
- 大数据之项目需求及架构设计
- python 爬虫 微博 github_GitHub - berluo/weiboSpider-1: 新浪微博爬虫,用python爬取新浪微博数据...
- 听说现在流行搬电脑回家?云桌面救星来了
- 怎么样用云服务器进行深度学习
- C语言(二十三)auto自动变量
- uva10306-电子硬币
- DO=MOSI DI=MISO
- 第三方远程控制工具TeamViewer的安装和使用教程,可下载window版和linux版,windows使用虚拟机可以与linux之间通讯
- (day16)媒体查询和响应式布局
- mac 关闭系统完整性保护 SIP(System Integrity Protection)的方法
- java毕业设计——基于java+JSP+MySQL的电脑彩票销售管理系统设计与实现(毕业论文+程序源码)——彩票销售管理系统
- Linux安装MySQL8.0.29,并使用Navicat连接
- 《深入浅出RxJS》读书笔记
热门文章
- 【2020新版】六家云厂商价格比较:AWS、阿里云、Azure、Google Cloud、华为云、腾讯云
- Linux学习总结(77)—— Shell 开发运维经验总结
- Dubbo学习总结(6)——Dubbo开源现状与未来规划
- Spring MVC学习总结(14)——SpringMVC测试框架之mockMVC详解
- Windows学习总结(11)——Windows批处理命令编写代码及小程序简介
- 绿茶软件测试自学,7号心理测试小程序
- java返回空集合对象_返回null或空集合更好吗?
- webpack打包vue2.0项目时必现问题
- Unity工程3D和2D开发模式切换
- CGContextRef使用简要教程