随笔分类 - Echarts
摘要：1.实现思路 Echarts本身没有这类图形，可以使用其扩展echarts-gl进行绘制，echarts-gl曲面图可以完成这类需求 <script src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script> <s
阅读全文
摘要：###1.实时曲线图 业务场景：每个时间节点产生一个数据，且时间节点间隔不固定 坐标轴配置：X轴类型设定为time，Y轴类型设定为value 数据格式：每个节点的数据都是一个数组，第一个数组为时间，第二个元素为值 //渲染参数 var option = { title: { text: '今日稼动率
阅读全文
摘要：###1.开启指示器 默认情况下，指示器是关闭状态，如果需要开启，直接配置tooltip字段即可 var option = { tooltip:{}, } ###2.指示器的触发类型 触发类型的字段为trigger，可选值如下 | 可选值 | 说明 | | | | | 'item' | 数据项图形触
阅读全文
摘要：###1.Echarts的颜色设计 Echarts的颜色的设置分为两种：色盘和具体颜色 色盘适合做全局设置，因为他里面有多个颜色，通俗的说色盘就是颜色预设值列表，色盘统一使用color属性进行配置。 而具体元素或者具体系列只有一个颜色时，可以单独为其进行设置，他的值为单个颜色值，但是具体元素和具体系
阅读全文
摘要：###1.图例组件的基本介绍 图例组件legend展现了不同系列的标记(symbol)，颜色和名字。可以通过点击图例控制哪些系列不显示。 ###2.开启图例组件 开启图例组件默认时关闭状态，通过配置legend字段后开启此功能 var option = { legend: { }, } ###3.图
阅读全文
摘要：###1.坐标轴组件配置项总览 坐标轴分为x轴和y轴，操作这两个轴的字段分别为xAxis和yAxis var option = { xAxis:{ name:"月份", axisTick:{},//刻度 axisLabel:{},//刻度值文本 axisLine:{},//坐标轴线 splitLin
阅读全文
摘要：###1.标题组件的基本使用 图标组件使用title节点进行配置。 标题分为主标题和副标题， 主标题的文本内容使用 'text' 属性进行设置 副标题使用 'subtext' 属性进行设置 var option = { title:{ text:"我是标题", subtext:"我是副标题" } }
阅读全文
摘要：###1.Echarts简介 ECharts 是一个使用 JavaScript 实现的开源可视化库，涵盖各行业图表，满足各种需求。 ECharts 包含了以下特性： (1)丰富的可视化类型: 常规的折线图、柱状图、散点图、饼图、K线图、仪表盘。 (2)移动端优化: 针对移动端交互做了细致的优化，例如
阅读全文
