柱状图、折线图、环图的常用配置(配置连接地址https://v-charts.js.org/#/line)

:data 绑定基本数据

{
// 第一个参数为维度(就是横轴,例如时间),剩余为指标(就是legend)
columns: ['日期', '访问用户', '下单用户', '下单率'],
// rows为数组,每个指标各有一条柱,并标注出每个指标的值
rows: [
{ '日期': '2018-01-01', '访问用户': 1393, '下单用户': 1093, '下单率': 0.32 },
{ '日期': '2018-01-02', '访问用户': 3530, '下单用户': 3230, '下单率': 0.26 },
{ '日期': '2018-01-03', '访问用户': 2923, '下单用户': 2623, '下单率': 0.76 },
{ '日期': '2018-01-05', '访问用户': 1723, '下单用户': 1423, '下单率': 0.49 },
{ '日期': '2018-01-10', '访问用户': 3792, '下单用户': 3492, '下单率': 0.323 },
{ '日期': '2018-01-20', '访问用户': 4593, '下单用户': 4293, '下单率': 0.78 }
],
// rows为对象 -- 散点图可以用
rows: {
name1: [
{month:'二月', key1:'', key2:'', key3: ''}
],
name2: [
{month:'三月', key1:'', key2:'', key3: ''}
],
}
}

:settings 绑定基本配置

{
// 声明维度 -- 默认就是columns的第一个
dimension: ['日期'], // 设置横轴为连续的数值轴,如时间,数字等
xAxisType: 'value(横轴必须是数字)', 'time(横轴是时间)' // 声明指标 -- columns的第二个开始
metrics: ['key1', 'key2', 'key3'], // 指标的别名 -- 后台数据给的指标大多时候不为中文,但是给用户看的肯定是中文的
labelMap: {
key1: 'value指标',
key2: 'value指标',
key3: 'value指标',
key4: '举个例子显示百分比'
}, // 修改图例别名 -- 就是顶部的那个几个色块,官网文档没用,绑定在legend里设置
legendName:{
'key1': '访问用户 total: 10000'
}, // 指标所在的轴 -- 设置左右双Y轴用
axisSite: { right: ['key4'] }, // 柱图 -- 堆叠key1、key2、key3在一条轴上显示
stack: { 'month': ['key1', 'key2', 'key3'] }, // 柱图 -- 设置其中一个指标为折线图(需要引入折线图组件)
showLine: ['key3'], // 纵轴左右坐标轴标题
yAxisName: ['月度课程发布情况', 'key4Name'], // 设置常用数据格式 -- 指标的单位
// 可以使用 numerify™ 的格式来配置显示,具体的格式支持和插件扩展写法可以参考 numerify™ 文档
// 也支持使用回调函数的方式function (v) {return v + ' ¥'}
// 折线图 -- 用yAxisType
yAxisType: ['KMB(对应yAxisName第一位)', 'percent(对应yAxisName第二位)'],
// 饼图环图 -- 用dataType
dataType: {
'key1': 'KMB', //数字转为RMB(基本的数据格式)
'key2': 'percent', //百分比格式(基本的数据格式)
'key3': 'normal' //千分位(基本的数据格式)
}, // 数据格式为 percent 保留的小数点
digit: 2, // 设置数据的排序方式,例如根据指标key1升序(实际效果好像是反的)
dataOrder: {
{ label: 'key1', order: 'asc' }
}, // 折线图 -- 填充整个面积的色块
area: true // 色块透明度
opacity: 0.5, // 环图 -- 限制最大数量
limitShowNum: 3, // 环图 -- 内外径
radius: [50, 70], // 环图 -- 纵轴中心位置,px或者%或'center'等
offsetY: '45%', // 环图 -- 支出来的那个线后面的文字
label: {
show: false
},
// 柱图 -- 显示柱状图数据值,并把具体数字放在顶部
label: { show: true, position: "top" }
// 折线 -- 显示具体数据数值
label: { normal: { show: true } } // 环图 -- 支出来的那个线
labelLine: {
show: false
}, // 环图 -- 玫瑰图
roseType: 'radius' // 环图饼图 -- 是否放上去放大
hoverAnimation: false
}

 :legend图例

{
// 调整图例区的位置,单位(数字,百分比,center/left位置)
right: 0, // 是否可以点击,隐藏点击的内容
selectedMode:false, // 图例的宽度,不够会换行
width: 100, //样式
textStyle: {
color: '#BED1EF'
} }

  grid绘制整个区域

{
// 调整位置
bottom: 0, //调整大小啥的
width: 200
}

  title: 环形图中间的文字说明

import 'echarts/lib/component/title'; //必须引入这个组件,默认不带title
{
// 文字啥的,用\n可以换行
text: '', //调整位置
x: 'center',
top: '35%', //调整样式
textStyle: {
fontSize: 20,
fontWeight: 'normal'
}
}

:extend 最终所有的配置都可以用这个值重新设置

{
// x轴的文字倾斜
'xAxis.0.axisLabel.rotate': 45, series: {
//环图 -- 圆心位置
center: ['50%', '50%'],
///环图颜色顺序,颜色不是按你的列表一一对应的,需要手动设置顺序
itemStyle: {
normal: {
color: (params)=> {
return this.colorList[params.dataIndex]
}
}
},
barWidth : 20,//柱图 -- 条宽度
    barMaxWidth: 20, // 柱状图---条的最大宽度
}, yAxis: {
// 纵坐标网格线设置,同理横坐标
splitLine:{
lineStyle: {
color: '#999'
}
},
// 纵坐标字体颜色,同理横坐标
axisLine:{
lineStyle:{
color: '#BED1EF'
}
}
}
}

  

最新文章

  1. PHP收藏
  2. djngo快速实现--使用Bootstrap
  3. cocos2d-x之多个移动的小球
  4. ajax接收返回值获取不到问题
  5. Codeforces Round #237 (Div. 2) A
  6. SQL注入测试平台 SQLol -5.DELETE注入测试
  7. js String方法集合
  8. CString-int-string-char-BSTR之间的转换
  9. Mac OS恢复出厂系统方法
  10. Android GridView用法介绍
  11. gitignore文件的作用
  12. JWT,oAuth和SSO的讨论
  13. linux重启查看日志及历史记录 查询原因
  14. JFreeChart 之柱状图
  15. Lua 调试库
  16. STM32 通用定时器相关寄存器
  17. python学习笔记--pycurl模块安装遇到的问题。
  18. linux centos 7.5下 源码编译安装 lua环境
  19. MySQL原生语句个人补漏
  20. D3D HOOK实现透视讲解

热门文章

  1. Ubantu学习笔记1
  2. P 1023 组个最小数
  3. CCCC L3-013. 非常弹的球
  4. OpenCV3 Ref SVM : cv::ml::SVM Class Reference
  5. tyvj 1860 后缀数组
  6. Python 中 使用 HTMLTestRunner 模块生成测试报告
  7. DQL单表查询
  8. oracle 向表中插入BLOB类型数据
  9. 201703-1 分蛋糕 Java
  10. 协程与异步IO