datav-team / charts Goto Github PK

View Code? Open in Web Editor NEW

147.0 147.0 46.0 1.69 MB

轻量级图表，提供常用图表如折线图、柱状图、饼状图等，支持动画效果

Home Page: http://charts.jiaminghi.com

License: MIT License

JavaScript 100.00%

charts's People

Contributors

Stargazers

Watchers

charts's Issues

折线图x轴坐标过多问题

折线图的X轴坐标太多会导致拥挤，能否有配置项配置隔几个坐标显示一下,和y轴类似
|
|
-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+ 月份
2019-01 2019-03 2019-06 2019-09 2019-12

问题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! 一直要参数，到底要什么参数，配置文件找不到

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'
              }
            }
          }
        ]
      }

柱状堆叠图数字位置显示不对

        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'
              }
            }            
          }                                                      
        ]

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}

datav-team / charts Goto Github PK

charts's People

Contributors

Stargazers

Watchers

Forkers

charts's Issues

Recommend Projects

Recommend Topics

Recommend Org