New Research: Supply Chain Attack on Axios Pulls Malicious Dependency from npm.Details → →

Book a Demo Sign in

simple-echarts

Package Overview

Advanced tools

Install Socket

Detect and block malicious and high-risk dependencies

Install

simple-echarts

import echats & simple-echarts

latest

npm

Version: 0.1.0

Version published: 4 years ago

Maintainers: 1

Created: 4 years ago

Source

SimpleEcharts

import echats & simple-echarts

import Loadable from 'react-loadable';
import { LineChart, BarChart, PieChart } from SimpleEcharts;
const ReactEcharts = Loadable({
  loader: () => import('echarts-for-react'),
  loading() {
    return <div className="jz-loading-charts">加载中</div>;
  },
});

折线图

<LineChart {...options}>
  <ReactEcharts
    style={{ width: '600px', height: '420px'}}
  />
</LineChart>

柱状图

<BarChart {...options}>
  <ReactEcharts
    style={{ width: '600px', height: '420px' }}
  />
</BarChart>

饼图

<PieChart {...options}>
  <ReactEcharts
    style={{ width: '600px', height: '420px' }}
  />
</PieChart>

options 示例

折线图


export const options = {
  theme: { color: 'black' },
  legend: true,
  xAxis: {
    name: '日期',
    data: [
      '星期一',
      '星期二',
      '星期三',
      '星期四',
      '星期五',
      '星期六',
      '星期日',
    ],
  },
  yAxis: {
    name: '浏览量',
  },
  series: [
    {
      name: 'UV',
      data: [2, 4, 7, 8, 11, 12, 15],
    },
    { name: 'PV', data: [100, 120, 137, 190, 165, 197, 305] },
  ],
};

柱状图

import * as echarts from 'echarts';

const areas = [
'东城区',
'西城区',
'朝阳区',
'海淀区',
'丰台区',
'石景山区',
'门头沟区',
'房山区',
'通州区',
'顺义区',
'大兴区',
'昌平区',
'平谷区',
'怀柔区',
'密云区',
'延庆区',
];

export const option1 = {
  legend: true,
  theme: { color: 'black', axisColor: '#93C7FF', lineColor: '#ddd' },
  // tooltip: {
  // formatter: function(params) {
  // let dataIndex = params[0].dataIndex
  // return `${params[0].name}<br/> // 计划：${greenData.planDatas[dataIndex]}<br/> // 完成：${greenData.datas[dataIndex]}<br/> // 超额：${greenData.overDatas[dataIndex]} //`
  // }
  // },
  xAxis: {
    data: areas,
  },
  yAxis: {
    name: '完成任务（亩）',
    showSpLine: false,
    min: 0,
    max: 4000,
  },
  series: [{
    name: '完成任务',
    color: new echarts.graphic.LinearGradient(0, 0, 1, 1, [{
      offset: 0,
      color: 'rgba(175,238,238,1)',
    },
    {
      offset: 1,
      color: 'rgba(0,206,209,1)',
    }
    ]),
    data: [
      '0.0',
      '0.0',
      '2524.61',
      '388.5',
      '894.6',
      '239.46',
      '82.17',
      '140.0',
      '3003.0',
      '253.8',
      '932.0',
      '4303.0',
      '33.0',
      '113.4',
      '131.6',
      { // 特殊值变颜色
        value: 2000,
        itemStyle: {
          color: new echarts.graphic.LinearGradient(0, 0, 1, 1, [{
            offset: 0,
            color: 'rgba(245,245,220,1)',
          },
          {
            offset: 1,
            color: 'rgba(255,255,0,1)',
          }
          ])
        }
      }
    ]
  }]
}

export const option2 = {
  legend: true,
  theme: { color: 'black', axisColor: '#93C7FF' },
  //position: { right: 25, left: 5, bottom: 15 },
  xAxis: {
    data: ['2012', '2013', '2014', '2015', '2016'],
  },
  yAxis: {
    showSpLine: false
  },
  series: [
    {
      name: 'Forest',
      data: [320, 332, 301, 334, 390],
    },
    {
      name: 'Steppe',
      data: [220, 182, 191, 234, 290],
    },
    {
      name: 'Desert',
      data: [150, 232, 201, 154, 190],
    },
    {
      name: 'Wetland',
      data: [98, 77, 101, 99, 40],
    }
  ]
};

export const option3 = {
  legend: true,
  theme: { color: 'black', axisColor: '#93C7FF' },
  //position: { right: 25, left: 5, bottom: 15 },
  xAxis: {
    data: ['2012', '2013', '2014', '2015', '2016'],
  },
  yAxis: {
    showSpLine: false,
  },
  series: [
    {
      name: 'Email',
      stack: 'Ad',
      data: [120, 132, 101, 134, 90, 230, 210],
    },
    {
      name: 'Union Ads',
      stack: 'Ad',
      data: [220, 182, 191, 234, 290, 330, 310],
    },
    {
      name: 'Video Ads',
      stack: 'Ad',
      data: [150, 232, 201, 154, 190, 330, 410],
    },
    {
      name: 'Search Engine',
      data: [862, 1018, 964, 1026, 1679, 1600, 1570],
      // 要有最高最低值
      markLine: {
        lineStyle: {
          type: 'dashed',
        },
        data: [[{ type: 'min' }, { type: 'max' }]],
      },
    },
  ],
};


export const option4 = {
  legend: true,
  theme: { color: 'red', axisColor: '#93C7FF', lineColor: '#ddd' },
  // position: { right: 25, left: 5, bottom: 15 },
  tooltip: {
    // formatter: function(params) {},
  },
  xAxis: {
    type: 'value',
    name: '任务量',
    showSpLine: true,
  },
  yAxis: {
    type: 'category',
    data: areas,
    showSpLine: false,
  },
  series: [
    {
      name: '完成任务',
      color: new echarts.graphic.LinearGradient(0, 0, 1, 1, [
        {
          offset: 0,
          color: 'rgba(175,238,238,1)',
        },
        {
          offset: 1,
          color: 'rgba(0,206,209,1)',
        },
      ]),
      data: [
        '0.0',
        '0.0',
        '-2524.61',
        '388.5',
        '894.6',
        '239.46',
        '82.17',
        '140.0',
        '3003.0',
        '253.8',
        '932.0',
        '4303.0',
        '33.0',
        '113.4',
        '131.6',
        // 特殊值变颜色
        {
          value: 2000,
          itemStyle: {
            color: new echarts.graphic.LinearGradient(0, 0, 1, 1, [
              {
                offset: 0,
                color: 'rgba(245,245,220,1)',
              },
              {
                offset: 1,
                color: 'rgba(255,255,0,1)',
              },
            ]),
          },
        },
      ],
    },
  ],
};

export const option5 = {
  legend: true,
  theme: { color: 'blue', axisColor: '#93C7FF' },
  // position: { right: 25, left: 5, bottom: 15 },
  xAxis: {
    data: ['2012', '2013', '2014', '2015', '2016'],
  },
  yAxis: {
    showSpLine: false,
  },
  series: [
    {
      name: 'Steppe',
      type: 'line',
      data: [220, 182, 191, 234, 290],
    },
    {
      name: 'Desert',
      data: [150, 232, 201, 154, 190],
    },
    {
      name: 'Wetland',
      data: [98, 77, 101, 99, 40],
    },
  ],
};

饼图

export const pieOption1 = {
  legend: false,
  series: [
    {
      name: 'Access From',
      radius: '60%',
      data: [
        { value: 1048, name: 'Search Engine' },
        { value: 735, name: 'Direct' },
        { value: 580, name: 'Email' },
        { value: 484, name: 'Union Ads' },
        { value: 300, name: 'Video Ads' },
      ],
      emphasis: {
        itemStyle: {
          shadowBlur: 10,
          shadowOffsetX: 0,
          shadowColor: 'rgba(0, 0, 0, 0.5)',
        },
      },
    },
  ],
};

export const pieOption2 = {
  legend: false,
  series: [
    {
      name: 'Access From',
      radius: ['40%', '60%'],
      itemRadius: 10,
      data: [
        { value: 1048, name: 'Search Engine' },
        { value: 735, name: 'Direct' },
        { value: 580, name: 'Email' },
        { value: 484, name: 'Union Ads' },
        { value: 300, name: 'Video Ads' },
      ],
    },
  ],
};

export const pieOption3 = {
  legend: true,
  series: [
    {
      name: 'Access From',
      radius: [0, '35%'],
      label: {
        position: 'inner',
        fontSize: 14,
      },
      data: [
        { value: 1048, name: 'Baidu' },
        { value: 735, name: 'Direct' },
        { value: 580, name: 'Email' },
      ],
    },
    {
      name: 'Access From',
      radius: ['45%', '60%'],
      data: [
        { value: 1048, name: 'Baidu' },
        { value: 335, name: 'Direct' },
        { value: 310, name: 'Email' },
        { value: 251, name: 'Google' },
        { value: 234, name: 'Union Ads' },
        { value: 147, name: 'Bing' },
        { value: 102, name: 'Others' },
      ],
    },
  ],
};

FAQs

What is simple-echarts?

Is simple-echarts well maintained?

Package last updated on 07 Jan 2022

Did you know?

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install