Echarts从零到一
丶久友
主要记录学习过程中的一些笔记,永远都是学了就忘,好记性不如烂笔头!
展开
-
Echarts 自定义绘制 使用 svg 小箭头
<div id="total-users-chart" :style="{ width: '100%', height: '100%' }" ></div> mounted() { const chartDom = document.getElementById("total-users-chart"); // 初始化echarts const chart = this.$echarts.init(ch...原创 2020-11-23 16:11:39 · 2417 阅读 · 0 评论 -
Echarts 小练习
<div id="total-orders-chart"></div> mounted() { const chartDom = document.getElementById("total-orders-chart"); // 初始化echarts const chart = this.$echarts.init(chartDom); chart.setOption({ xAxis: { type: "c...原创 2020-11-23 14:27:49 · 656 阅读 · 0 评论 -
Echarts多坐标系 多张图表
<!DOCTYPE html><html lang="zh"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Echarts 组件</title> <script src="https://cdn.jsdeliv..原创 2020-11-22 12:37:26 · 1202 阅读 · 0 评论 -
Echarts 双坐标系
两个 yAxis,共享了一个 xAxis。两个 series,也共享了这个 xAxis,但是分别使用不同的 yAxis,使用 yAxisIndex 来指定它自己使用的是哪个 yAxis:两个y轴坐标,因为数据不同,所以两边各展现一条横线,解决办法<!DOCTYPE html><html lang="zh"><head> <meta charset="UTF-8"> <meta name="viewport" content=原创 2020-11-22 01:03:56 · 4628 阅读 · 3 评论 -
Echarts 定位 grid
/** * @param { 定位 } */ grid: { top: 100, left: '20%', right: '20%', bottom: 100 },原创 2020-11-22 00:37:52 · 1418 阅读 · 0 评论 -
Echarts 组件
有个大概了解,知道什么组件代表什么东西,然后查看官方文档,用到时做相应样式变动<!DOCTYPE html><html lang="zh"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Echarts 组件</title>.原创 2020-11-22 00:26:16 · 787 阅读 · 0 评论 -
Echarts4使用 dataset 管理数据
官方文档Apache ECharts (incubating)TM 4 开始支持了 dataset 组件用于单独的数据集声明,从而数据可以单独管理,被多个组件复用,并且可以基于数据指定数据到视觉的映射。这在不少场景下能带来使用上的方便。ECharts 4 以前,数据只能声明在各个“系列(series)”中,例如:option = { xAxis: { type: 'category', data: ['Matcha Latte', 'Milk Tea', 'Ch原创 2020-11-21 23:43:20 · 533 阅读 · 0 评论 -
在一个Echarts中绘制多张图表(echarts多系列混合)
<!DOCTYPE html><html lang="zh"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>多系列混合图表</title> <script src="https://cdn.jsdelivr.ne.原创 2020-11-21 22:40:16 · 5024 阅读 · 0 评论 -
Echarts 切换canvas或者svg绘图
echarts默认使用canvas绘图,大屏显示会造成模糊效果,4.0可更改成svg绘图 const chartDom = document.getElementById('chart') // 这里替换主题 // dom元素 主题名称 绘图方式,默认为canvas const chart = echarts.init(chartDom, 'wonderland', { renderer: 'svg' })...原创 2020-11-21 22:07:43 · 2150 阅读 · 1 评论