データの可視化ツール Echarts

Echarts

EChartは、Baiduが提供しているJavascriptのデータ可視化ライブラリです。
利用できるチャートが豊富で、ビッグデータ分析や処理の作成にも優れています。


        var myChart = echarts.init(document.getElementById('main'));

        var option = {
          title: {
            text: 'bar chart'
          },
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'shadow'
            }
          },
          legend: {
            data: ['Sales', 'Cost', 'Net Sale']
          },
          xAxis: {
            data: ["P1", "P2", "P3", "P3", "P4", "P5"]
          },
          yAxis: {},
          series: [{
              name: 'Sales',
              type: 'bar',
              data: [100, 20, 36, 10, 10, 20]
            },
            {
              name: 'Cost',
              type: 'bar',
              data: [60, 12, 21, 6, 6, 12]
            },
            {
              name: 'Net Sale',
              type: 'line',
              data: [40, 8, 15, 4, 4, 8]
            }
          ]

        };

        // set
        myChart.setOption(option);

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

var myChart = echarts.init(document.getElementById('main'));

var option = {

title: {

text: 'bar chart'

},

tooltip: {

trigger: 'axis',

axisPointer: {

type: 'shadow'

}

},

legend: {

data: ['Sales', 'Cost', 'Net Sale']

},

xAxis: {

data: ["P1", "P2", "P3", "P3", "P4", "P5"]

},

yAxis: {},

series: [{

type: 'bar',

data: [100, 20, 36, 10, 10, 20]

},

{

type: 'bar',

data: [60, 12, 21, 6, 6, 12]

},

{

type: 'line',

data: [40, 8, 15, 4, 4, 8]

}

]

};

// set

myChart.setOption(option);

Canvas javascript

WRITER

スターフィールド編集部

この著者の記事を見る

PREV独ドメで総合通販をやりたい企業が増えている？NEXTJavaScriptでIoTの組み込みプログラミングが学習できるobnizを試してみました

データの可視化ツール Echarts

Echarts

Related