数据可视化 Echarts + 边框图片 + ES6拼接字符串
一、Echarts
简单的使用步骤
- 官方教程: 五分钟上手
- 下载: echarts
- 引入echarts
dist/echarts.min.js
- 准备一个具备大小的DOM容器
<div id="main" style="width: 600px;height:400px;"></div>
- 初始化echarts实例对象
var myChart = echarts.init(document.getElementById('main'));
- 指定配置项和数据(option)
var option = {xAxis: {type: 'category',data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']},yAxis: {type: 'value'},series: [{data: [820, 932, 901, 934, 1290, 1330, 1320],type: 'line'}]
};
- 将配置项设置给echarts实例对象
myChart.setOption(option);
查阅官网文档使用
二、边框图片
// 组合写法
border-image: url("images/border.jpg") 167/20px round;// 差分写法
border-image-source: url("images/border.jpg");
border-image-slice: 167 167 167 167;
border-image-width: 20px;
border-image-repeat: round;
- 边框图片资源地址
- m裁剪尺寸(上 右 下 左)单位默认px,可使用百分百。
- 边框图片的宽度,默认边框的宽度。
- 平铺方式:
- stretch 拉伸(默认)
- repeat 平铺,从边框的中心向两侧开始平铺,会出现不完整的图片
- round 环绕,是完整的使用切割后的图片进行平铺(常用)
三、ES6模版字符(拼接字符串)
// 模版字符
var star = {name: "刘德华",age: 18};
// 以前的写法 拼接的时候引号很容易出问题
console.log("我的名字是" + star.name + "我的年龄是" + star.age);
// ES6 模板字符写法
console.log(`我的名字是${star.name}我的年龄是${star.age}`);
console.log(`<span>${star.name}</span><span>${star.age}</span>`);// 这里面用的是重音符
数据可视化 Echarts + 边框图片 + ES6拼接字符串相关推荐
- 数据可视化-echarts入门、常见图表案例、超详细配置解析及项目案例
文章目录 数据可视化-echarts入门.常见图表案例及项目案例 一.简介 一.数据可视化简介 二.echarts简介 三.echarts特点 四.ZRender介绍 二.Echarts的基本使用 一 ...
- 数据可视化ECharts的七大常用图表,看完就会用(1)
本文的后半部分:数据可视化ECharts的常用图表,看完就会用(2) 文章目录 数据可视化 什么是数据可视化? 数据可视化的好处 数据可视化的实现方式 ECharts ECharts的特性 一个ECh ...
- Echarts数据可视化echarts实例的相关操作,开发全解+完美注释
全栈工程师开发手册 (作者:栾鹏) Echarts数据可视化开发代码注释全解 Echarts数据可视化开发参数配置全解 6大公共组件详解(点击进入): title详解. tooltip详解.toolb ...
- Django博客来访人员地域分布大数据可视化---echarts绘图、geoip2获取地理位置
文章目录 Django博客来访人员地域分布大数据可视化---echarts绘图.geoip2获取地理位置 效果 echarts作图 geoip2获取地理位置 api接口开发 ajax前后端动态交互 D ...
- es6拼接字符串的方式。
文章:es6拼接字符串的方式. 转载于:https://www.cnblogs.com/Tpf386/p/9519007.html
- 数据可视化(ECharts)
DAY01-可视化项目 01-项目介绍 应对现在数据可视化的趋势,越来越多企业需要在很多场景(营销数据,生产数据,用户数据)下使用,可视化图表来展示体现数据,让数据更加直观,数据特点更加突出.我们 ...
- 数据可视化Echarts—— 案例:立可得-智能看板
案例:立可得-智能看板 项目介绍 应对现在数据可视化的趋势,越来越多企业需要在很多场景(营销数据,生产数据,用户数据)下使用,可视化图表来展示体现数据,让数据更加直观,数据特点更加突出.我们引入 '立 ...
- 数据可视化 - Echarts图表
可视化项目 代码 - - > 底部 01-项目介绍 应对现在数据可视化的趋势,越来越多企业需要在很多场景(营销数据,生产数据,用户数据)下使用,可视化图表来展示体现数据,让数据更加直观,数据 ...
- 数据可视化echarts学习笔记
文章目录 echarts 使用 渐变色 一些配置项 dataset与transform数据过滤 dataset transform 动态排序 时间轴更新数据 极坐标系 echarts 官网https: ...
- 数据可视化——echarts
目录 一.可视化面板介绍 二.可视化库介绍 三.Echarts-体验 1.引入echarts 插件文件到html页面中 2.准备一个具备大小的DOM容器 3.初始化echarts实例对象 4.指定配置 ...
最新文章
- 人要懂得放下已经发生,却又无法改变的事情
- Eclipse复制或修改项目后,把项目部署后发现还是原来的项目名称
- ECSHOP商品详情页”增加自定义TITLE
- SAP License:SAP标准教材的编号原则
- 字节跳动BVC2解码器率先支持移动平台H.266标准8K解码
- github设置添加SSH(转载自:破男孩)
- 强大的日志分析工具AWStats
- 硅谷初创企业控制成本 裁员风渐起
- COM 组件设计与应用7 - 编译、注册、调用
- QTP添加java插件
- VM 网络设置 for xp3
- winhex 19.8 注册码生成工具(keygen)
- pic12f1823单片机入门_PIC单片机入门教程V1.1
- Chrome扩展开发总结之浏览器书签获取
- ERC20 智能合约整数溢出系列漏洞披露
- ISBN(国际标准书号)
- __kindof的用法
- Fiddler:显示请求花费的时间
- 编程累了,欣赏一下小马的创业语录。
- H.264区分NALU startCode和NALU 内部和startCode相同的内容