echarts配置项太多了,还是一点点积累吧~~~~~

当然前提条件还是得老老实实看echarts官方文档 :https://echarts.baidu.com/

今天主要就介绍下我在工作中通过echarts实现的微信小程序的折线图

Demo地址:https://gitee.com/v-Xie/echartsDemo.git

效果嘛如下:

通过此图分析得出需要实现以下几点:(主要配置代码请看后面部分)

1.标题(折线图)-title

  需:颜色,文本,位置

2.图例(财运,感情,事业)-legend

  需:图例颜色,图标形状,图标文本,各图标间隔

3.横纵坐标

  需: 》》横坐标-xAxis

          刻度【周一,周二...周日】,-axisLabel

       分割线 -splitLine

》》纵坐标-yAxis:

          刻度【大吉,...凶】,-axisLabel

       分割线 -splitLine

4.数据项-series

开发吧:

首先下载echarts

进行中:

目录

line/index.wxml

<!--index.wxml-->
<view class="container">
<view class='echart_wrap'>
<ec-canvas id="mychart" canvas-id="mychart-line" ec="{{ ec }}"></ec-canvas>
</view>
</view>

line/index.json

{
"usingComponents": {
"ec-canvas": "../../ec-canvas/ec-canvas"
}
}

line/index.js中

// 引入echarts.js
import * as echarts from '../../ec-canvas/echarts';
var Chart=null;
const app = getApp();
Page({
data: {
ec: {
onInit: function (canvas, width, height) {
chart = echarts.init(canvas, null, {
width: width,
height: height
});
canvas.setChart(chart);
return chart;
},
lazyLoad: true // 延迟加载
},
},
onLoad: function (options) {
this.echartsComponnet = this.selectComponent('#mychart');
//如果是第一次绘制
if (!Chart) {
this.init_echarts(); //初始化图表
} else {
this.setOption(Chart); //更新数据
}
},
onReady() {
},
//初始化图表
init_echarts: function () {
this.echartsComponnet.init((canvas, width, height) => {
// 初始化图表
const Chart = echarts.init(canvas, null, {
width: width,
height: height
});
this.setOption(Chart)
// 注意这里一定要返回 chart 实例,否则会影响事件处理等
return Chart;
});
},
setOption: function (Chart) {
Chart.clear(); // 清除
Chart.setOption(this.getOption()); //获取新数据
},
// 图表配置项
getOption() {
var self = this;
var option = {
title: {//标题
text: '折线图',
left: 'center'
},
renderAsImage: true, //支持渲染为图片模式
color: ["#FFC34F", "#FF6D60", "#44B2FB"],//图例图标颜色
legend: {
show: true,
itemGap: ,//每个图例间的间隔
top: ,
x: ,//水平安放位置,离容器左侧的距离 'left'
z: ,
textStyle: {
color: '#383838'
},
data: [//图例具体内容
{
name: '财运',//图例名字
textStyle: {//图例文本样式
fontSize: ,
color: '#383838'
},
icon: 'roundRect'//图例项的 icon,可以是图片
},
{
name: '感情',
textStyle: {
fontSize: ,
color: '#383838'
},
icon: 'roundRect'
},
{
name: '事业',
textStyle: {
fontSize: ,
color: '#383838'
},
icon: 'roundRect'
}
]
},
grid: {//网格
left: ,
top:,
containLabel: true,//grid 区域是否包含坐标轴的刻度标签
},
xAxis: {//横坐标
type: 'category',
name: '日期',//横坐标名称
nameTextStyle: {//在name值存在下,设置name的样式
color: 'red',
fontStyle: 'normal'
},
nameLocation:'end',
splitLine: {//坐标轴在 grid 区域中的分隔线。
show: true,
lineStyle: {
type: 'dashed'
}
},
boundaryGap: false,//1.true 数据点在2个刻度直接 2.fals 数据点在分割线上,即刻度值上
data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
axisLabel: {
textStyle: {
fontSize: ,
color: '#5D5D5D'
}
}
},
yAxis: {//纵坐标
type: 'value',
position:'left',
name: '运势',//纵坐标名称
nameTextStyle:{//在name值存在下,设置name的样式
color:'red',
fontStyle:'normal'
},
splitNumber: ,//坐标轴的分割段数
splitLine: {//坐标轴在 grid 区域中的分隔线。
show: true,
lineStyle: {
type: 'dashed'
}
},
axisLabel: {//坐标轴刻度标签
formatter: function (value) {
var xLable = [];
) {
xLable.push('大凶');
}
) {
xLable.push('凶');
}
) {
xLable.push('平淡');
}
) {
xLable.push('小吉');
}
) {
xLable.push('大吉');
}
return xLable
},
textStyle: {
fontSize: ,
color: '#5D5D5D',
}
},
min: ,
max: ,
},
series: [{
name: '财运',
type: 'line',
data: [, , , , , , ],
symbol: 'none',
itemStyle: {
normal: {
lineStyle: {
color: '#FFC34F'
}
}
}
}, {
name: '感情',
type: 'line',
data: [, , , , , , ],
// data: ["80", "20", "50", "70", "80", "60", "70"],
symbol: 'none',
itemStyle: {
normal: {
lineStyle: {
color: '#FF6D60'
}
}
}
}, {
name: '事业',
type: 'line',
data: [, , , , , , ],
// data: ["50", "30", "40", "70", "90", "30", "20"],
symbol: 'none',
itemStyle: {
normal: {
lineStyle: {
color: '#44B2FB'
}
}
}
}],
}
return option;
},
});

      

微信小程序中-折线图的更多相关文章

  1. 微信小程序echart 折线图legend不显示的问题

    最近使用小程序echart折线图,遇到表头一直不显示问题,查询之后解决方案:

  2. 微信小程序绘制分享图

    微信小程序绘制分享图例子: demo下载地址:https://gitee.com/v-Xie/wxCanvasShar 大致代码会再以下说明 实际开发项目: 基础知识点: 了解canvas基础知识 w ...

  3. 微信小程序中用户登录和登录态维护

    提供用户登录以及维护用户的登录状态,是一个拥有用户系统的软件应用普遍需要做的事情.像微信这样的一个社交平台,如果做一个小程序应用,我们可能很少会去做一个完全脱离和舍弃连接用户信息的纯工具软件. 让用户 ...

  4. 全栈开发工程师微信小程序-中(下)

    全栈开发工程师微信小程序-中(下) 微信小程序视图层 wxml用于描述页面的结构,wxss用于描述页面的样式,组件用于视图的基本组成单元. // 绑定数据 index.wxml <view> ...

  5. 微信小程序中this关键字使用技巧

    转自:https://blog.csdn.net/qq_33956478/article/details/81348453 微信小程序中,在wx.request({});方法调用成功或者失败之后,有时 ...

  6. 如何在微信小程序中使用字体图标

    微信小程序中,在image标签里,可以在src中引用本地文件,但是background设置背景图或者使用字体图标的时候,却不能引用本地文件,只能用url地址的图片或字体,或者使用base64编码后的格 ...

  7. 图解微信小程序---轮播图

    图解微信小程序---轮播图 代码笔记 第一步:在页面创建swiper组件 第二步:编写js页面 注意事项:wx:for渲染我们js中的图片数组,item默认写法,获取我们的图片数组中的图片,可通过增加 ...

  8. 微信小程序中如何上传图片

    本篇文章给大家带来的内容是关于微信小程序中如何上传图片(代码示例),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. 一.wxml文件 <text>上传图片</text ...

  9. 网页或微信小程序中使元素占满整个屏幕高度

    在项目中经常要用到一个容器元素占满屏幕高度和宽度,然后再在这个容器元素里放置其他元素. 宽度很简单就是width:100% 但是高度呢,我们知道的是height:100%必须是在父元素的高度给定了的情 ...

随机推荐

  1. (十四)WebGIS中地图放大缩小的设计和实现

    文章版权由作者李晓晖和博客园共有,若转载请于明显处标明出处:http://www.cnblogs.com/naaoveGIS/. 1.背景 在上一章中,我们给出了整个工具栏设计的核心,使用命令模式,并 ...

  2. Linux搭建SVN服务器

    1 安装SVN 官网下载:http://subversion.apache.org/packages.html SVN客户端:TortoiseSVN,官网下载:http://tortoisesvn.n ...

  3. MVC3.0 EF增删改查的封装类

    本人亲身使用EF CodeFirst,因为增删改查都是使用EF内置的一些方法,我想把它封装到一个类调用就行了.结合网上的资料和自己的整理,若有不对的地方望斧正,感激不尽.直接上代码吧.我就用新闻的增删 ...

  4. VB已死?还是会在Roslyn之下焕发新生?

    (此文章同时发表在本人微信公众号"dotNET每日精华文章",欢迎右边二维码来关注.) 由于最初的ASP.NET 5测试版并未支持VB,导致社区有一种声音:觉得VB将死.今天我们就 ...

  5. C#代码实现隐藏任务栏、开始菜单和禁用任务管理

    一:截图,主要是调用系统接口和更改注册表实现功能 二:代码 using System; using System.Collections.Generic; using System.Linq; usi ...

  6. MyEclipse2014破解版安装教程

    下载安装包和破解程序脚本 1.下载地址 链接:https://pan.baidu.com/s/1XuMweEz602zcoGqwPb2xTA 提取码:idsx  两个文件:myeclipse-pro- ...

  7. 面试简单整理之web

    63.servlet是什么?运行过程? Servlet是一门用于开发动态web资源的技术. 运行过程: Servlet程序是由WEB服务器调用,web服务器收到客户端的Servlet访问请求后: ①W ...

  8. Python-random模块-59

    random模块: 随机数模块 >>> import random #随机小数 >>> random.random() # 大于0且小于1之间的小数 0.76643 ...

  9. RocketMQ 消息发送

    消息发送基本流程: 1.消息验证 验证主题(topic),消息体不能为空和大小不能超过4M. 2.路由查找 a.查看缓存,是否有topic的路由信息. b.如果没有则到NameServer中获取路由信 ...

  10. Cmd2001的毒瘤水题题解

    怕不是我再不写题解这题就该成没人做也没人会的千古谜题了...... T1: 仔细分析题面,发现相同就是广义SAM上节点相同,相似就是广义SAM上为从根到某个点路径的前缀..直接SAM上跑从根开始,每个 ...