datav-team / charts Goto Github PK
View Code? Open in Web Editor NEW轻量级图表,提供常用图表如折线图、柱状图、饼状图等,支持动画效果
Home Page: http://charts.jiaminghi.com
License: MIT License
轻量级图表,提供常用图表如折线图、柱状图、饼状图等,支持动画效果
Home Page: http://charts.jiaminghi.com
License: MIT License
配置项如:
options:
{
legend: {
data: [
{
name: '业务可用性',
color: '#3de7c9'
}
],
y: 'top',
textStyle: {
fill: '#fff'
}
},
xAxis: {
data: [
'2019-12-10', '2019-12-11',
'2019-12-12', '2019-12-13',
'2019-12-14', '2019-12-15',
'2019-12-16', '2019-12-17',
'2019-12-18', '2019-12-19'],
axisLine: {
style: {
stroke: '#999'
}
},
axisLabel: {
style: {
fill: '#999'
}
},
axisTick: {
show: false
}
},
yAxis: {
data: 'value',
min: 80,
splitLine: {
show: false
},
axisLine: {
style: {
stroke: '#999'
}
},
axisLabel: {
style: {
fill: '#999'
}
},
axisTick: {
show: false
}
},
series: [
{
name: '业务可用性',
data: [100, 100, 100, 100, 100, 100, 100, 100, 100, 100],
type: 'line',
smooth: true,
lineArea: {
show: true,
gradient: ['rgba(55, 162, 218, 0.6)', 'rgba(55, 162, 218, 0)']
},
lineStyle: {
lineDash: [5, 5]
},
linePoint: {
radius: 4,
style: {
fill: '#00db95'
}
}
}
]
}
yAxis: [
{
name: '曝光数',
nameTextStyle: {
fill: '#b1afc6',
fontSize: 14,
},
data: 'value',
min: 0,
axisLabel: {
style: {
fill: '#b1afc6',
fontSize: 14,
rotate: 0,
},
},
axisTick: {
show: false,
style: {
stroke: '#b1afc6',
},
},
axisLine: {
show: false,
style: {
stroke: '#B9B8CE',
},
},
splitLine: {
style: {
stroke: '#484753',
},
},
},
{
name: '千次成本',
nameTextStyle: {
fill: '#b1afc6',
fontSize: 14,
},
data: 'value',
position: 'right',
min: 0,
max: 160,
splitLine: {
show: false,
},
axisLabel: {
style: {
fill: '#b1afc6',
fontSize: 14,
rotate: 0,
},
formatter: '{value} 元',
},
axisTick: {
show: false,
},
axisLine: {
show: false,
},
},
],
min和max是否可以不用写死?
使用'dataMin'和'dataMax'或者使用funtion(value){retrun value.min*0.8}
import { changeDefaultConfig } from '@jiaminghi/charts'
changeDefaultConfig('color', ['#000'])
文档里 我没看懂 到底是怎么用的,我是react版本的 在 哪里写都不好使,作者能不能 告知一下如何才能正确修改全局配置
请问如何支持2d地图呢
这两个没了
script引用链失效了
在vue项目中使用饼状图,在子组组件中使用标签,然后在父组件中进行实例化的时候,会new出来2个canvas
怎么关闭动画,直接将图形绘制出来不想使用动画效果,需要怎么配置呢
如题,没有这个属性的话,y轴标签很容易长度过长超出容器大小,而且如果只是单独设置left,top的话又不能自适应了
series: [
{
name: '完成工时',
data: [],
type: 'bar',
stack: 'a',
label: {
show: true,
position: 'center',
offset: [0, 0],
style: {
fontSize: 20,
fill: '#fff'
}
}
},
{
name: '剩余工时',
data: [],
type: 'bar',
stack: 'a',
label: {
show: true,
position: 'center',
offset: [0, 0],
style: {
fontSize: 20,
fill: '#fff'
}
}
}
]
希望作者能在图例中加上tooltip属性
问题1:已声明“Charts”,但从未读取其值。ts(6133)
无法找到模块“@jiaminghi/charts”的声明文件。“c:/Users/tt/Desktop/Project/vue2.0/node_modules/@jiaminghi/charts/lib/index.js”隐式拥有 "any" 类型。
尝试 npm install @types/jiaminghi__charts
(如果存在),或者添加一个包含 declare module '@jiaminghi/charts';
的新声明(.d.ts)文件ts(7016)
问题2:charts.class.js:26 Charts Missing parameters! 一直要参数,到底要什么参数,配置文件找不到
pieStyle参数全部修改为一个颜色了
现在飞线图的地图用的是图片的形式,可不可以考虑用户直接配置地图等级,以及地图的范围,例如国家级-**,这样自动会出现地图。目前飞线图使用的是图片形式,感觉用起来差点意思。望采纳建议
大数据量渲染导致整个页面卡顿的问题是否有办法解决
在文档配置项没找到相对应的API.
配置文档没找到这个选项
折线图的X轴坐标太多会导致拥挤,能否有配置项配置隔几个坐标显示一下,和y轴类似
|
|
-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+ 月份
2019-01 2019-03 2019-06 2019-09 2019-12
折线图中的水平线的参数是什么
渲染后canvas中的文字很模糊,这是什么原因,有参数控制?
legend 显示不出来啊
如题·,求助一波,需求是鼠标放入显示当前值
不能完全的formatter
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.