EChart Examples With Code

Anonymous

2025-02-25 About 2400 words 11 minutes

A Pie Chart (interactive) - click below to see the code

 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


```echarts
{
  "title": {
    "text": "Interactive Weekly Activity Distribution",
    "left": "center"
  },
  "tooltip": {
    "trigger": "item"
  },
  "legend": {
    "orient": "vertical",
    "left": "left"
  },
  "series": [
    {
      "name": "Activity",
      "type": "pie",
      "radius": "50%",
      "selectedMode": "single",
      "data": [
        { "value": 150, "name": "Mon" },
        { "value": 230, "name": "Tue" },
        { "value": 224, "name": "Wed" },
        { "value": 218, "name": "Thu" },
        { "value": 135, "name": "Fri" },
        { "value": 147, "name": "Sat" },
        { "value": 260, "name": "Sun" }
      ],
      "emphasis": {
        "itemStyle": {
          "shadowBlur": 10,
          "shadowOffsetX": 0,
          "shadowColor": "rgba(0, 0, 0, 0.5)"
        }
      }
    }
  ]
}

A Line Chart (interactive) - click below to see the code

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24


```echarts
{
  "title": {
    "text": "Weekly Activity Trend",
    "left": "center"
  },
  "tooltip": {
    "trigger": "axis"
  },
  "xAxis": {
    "type": "category",
    "data": ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"]
  },
  "yAxis": {
    "type": "value"
  },
  "series": [
    {
      "name": "Activity",
      "type": "line",
      "data": [150, 230, 224, 218, 135, 147, 260]
    }
  ]
}

A Bar Chart (interactive) - click below to see the code

 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


```echarts
{
  "title": {
    "text": "Weekly Activity Waterfall",
    "left": "center"
  },
  "tooltip": {
    "trigger": "axis"
  },
  "xAxis": {
    "type": "category",
    "data": ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"]
  },
  "yAxis": {
    "type": "value"
  },
  "series": [
    {
      "name": "Activity",
      "type": "bar",
      "data": [150, 230, 224, 218, 135, 147, 260],
      "itemStyle": {
        "color": "#5470C6"
      }
    }
  ]
}

Two Chart (interactive) - click below to see the code

  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
 41
 42
 43
 44
 45
 46
 47
 48
 49
 50
 51
 52
 53
 54
 55
 56
 57
 58
 59
 60
 61
 62
 63
 64
 65
 66
 67
 68
 69
 70
 71
 72
 73
 74
 75
 76
 77
 78
 79
 80
 81
 82
 83
 84
 85
 86
 87
 88
 89
 90
 91
 92
 93
 94
 95
 96
 97
 98
 99
100
101
102
103
104
105
106
107
108
109
110


```echarts
{
  "title": [
    {
      "text": "Pie Chart Example",
      "left": "10%",
      "top": "5%"
    },
    {
      "text": "Polar Bar Chart Example",
      "left": "60%",
      "top": "5%"
    }
  ],
  "tooltip": {
    "trigger": "item"
  },
  "legend": [
    {
      "orient": "vertical",
      "left": "10%",
      "top": "15%",
      "data": ["Category A", "Category B", "Category C"]
    },
    {
      "orient": "vertical",
      "left": "60%",
      "top": "15%",
      "data": ["S1", "S2", "S3", "T1", "T2", "T3"]
    }
  ],
  "grid": [
    {
      "left": "5%",
      "top": "20%",
      "width": "40%",
      "height": "70%"
    },
    {
      "left": "55%",
      "top": "20%",
      "width": "40%",
      "height": "70%"
    }
  ],
  "series": [
    {
      "name": "Pie Chart",
      "type": "pie",
      "radius": "50%",
      "center": ["25%", "50%"],
      "data": [
        { "value": 335, "name": "Category A" },
        { "value": 310, "name": "Category B" },
        { "value": 274, "name": "Category C" }
      ],
      "emphasis": {
        "itemStyle": {
          "shadowBlur": 10,
          "shadowOffsetX": 0,
          "shadowColor": "rgba(0, 0, 0, 0.5)"
        }
      }
    },
    {
      "name": "Series 1",
      "type": "bar",
      "polarIndex": 0,
      "data": [1, 2, 3],
      "coordinateSystem": "polar"
    },
    {
      "name": "Series 2",
      "type": "bar",
      "polarIndex": 1,
      "data": [1, 2, 3],
      "coordinateSystem": "polar"
    }
  ],
  "angleAxis": [
    {
      "type": "category",
      "polarIndex": 0,
      "startAngle": 90,
      "endAngle": 0,
      "data": ["S1", "S2", "S3"]
    },
    {
      "type": "category",
      "polarIndex": 1,
      "startAngle": -90,
      "endAngle": -180,
      "data": ["T1", "T2", "T3"]
    }
  ],
  "radiusAxis": [
    { "polarIndex": 0 },
    { "polarIndex": 1 }
  ],
  "polar": [
    {
      "center": ["75%", "50%"],
      "radius": "40%"
    },
    {
      "center": ["75%", "50%"],
      "radius": "40%"
    }
  ]
}

Four Chart (interactive) - click below to see the code

  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
 41
 42
 43
 44
 45
 46
 47
 48
 49
 50
 51
 52
 53
 54
 55
 56
 57
 58
 59
 60
 61
 62
 63
 64
 65
 66
 67
 68
 69
 70
 71
 72
 73
 74
 75
 76
 77
 78
 79
 80
 81
 82
 83
 84
 85
 86
 87
 88
 89
 90
 91
 92
 93
 94
 95
 96
 97
 98
 99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179


```echarts
{
  "title": [
    {
      "text": "Timeline Chart",
      "left": "5%",
      "top": "5%"
    },
    {
      "text": "Pie Chart",
      "left": "55%",
      "top": "5%"
    },
    {
      "text": "Scatter Plot",
      "left": "5%",
      "top": "55%"
    },
    {
      "text": "Tangential Polar Chart",
      "left": "55%",
      "top": "55%"
    }
  ],
  "tooltip": {
    "trigger": "item"
  },
  "legend": {
    "orient": "vertical",
    "left": "left",
    "data": ["Series A", "Series B", "Series C"]
  },
  "grid": [
    {
      "left": "5%",
      "top": "15%",
      "width": "40%",
      "height": "35%"
    },
    {
      "left": "55%",
      "top": "15%",
      "width": "40%",
      "height": "35%"
    },
    {
      "left": "5%",
      "top": "65%",
      "width": "40%",
      "height": "35%"
    },
    {
      "left": "55%",
      "top": "65%",
      "width": "40%",
      "height": "35%"
    }
  ],
  "xAxis": [
    {
      "type": "time",
      "gridIndex": 0
    },
    {
      "type": "value",
      "gridIndex": 2
    }
  ],
  "yAxis": [
    {
      "type": "value",
      "gridIndex": 0
    },
    {
      "type": "value",
      "gridIndex": 2
    }
  ],
  "angleAxis": [
    {
      "type": "value",
      "startAngle": 0,
      "polarIndex": 0
    }
  ],
  "radiusAxis": [
    {
      "polarIndex": 0
    }
  ],
  "polar": [
    {
      "center": ["75%", "80%"],
      "radius": "30%"
    }
  ],
  "series": [
    {
      "name": "Series A",
      "type": "line",
      "xAxisIndex": 0,
      "yAxisIndex": 0,
      "data": [
        ["2023-10-01", 10],
        ["2023-10-02", 20],
        ["2023-10-03", 15],
        ["2023-10-04", 25]
      ]
    },
    {
      "name": "Series B",
      "type": "line",
      "xAxisIndex": 0,
      "yAxisIndex": 0,
      "data": [
        ["2023-10-01", 5],
        ["2023-10-02", 15],
        ["2023-10-03", 10],
        ["2023-10-04", 20]
      ]
    },
    {
      "name": "Pie Chart",
      "type": "pie",
      "radius": "50%",
      "center": ["75%", "30%"],
      "data": [
        { "value": 335, "name": "Series A" },
        { "value": 310, "name": "Series B" },
        { "value": 274, "name": "Series C" }
      ],
      "emphasis": {
        "itemStyle": {
          "shadowBlur": 10,
          "shadowOffsetX": 0,
          "shadowColor": "rgba(0, 0, 0, 0.5)"
        }
      }
    },
    {
      "name": "Series A",
      "type": "scatter",
      "xAxisIndex": 1,
      "yAxisIndex": 1,
      "data": [
        [1, 10],
        [2, 20],
        [3, 15],
        [4, 25]
      ]
    },
    {
      "name": "Series B",
      "type": "scatter",
      "xAxisIndex": 1,
      "yAxisIndex": 1,
      "data": [
        [1, 5],
        [2, 15],
        [3, 10],
        [4, 20]
      ]
    },
    {
      "name": "Series A",
      "type": "bar",
      "polarIndex": 0,
      "data": [1, 2, 3],
      "coordinateSystem": "polar"
    },
    {
      "name": "Series B",
      "type": "bar",
      "polarIndex": 0,
      "data": [4, 5, 6],
      "coordinateSystem": "polar"
    }
  ]
}

Four Chart centralized data (interactive) - click below to see the code

  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
 41
 42
 43
 44
 45
 46
 47
 48
 49
 50
 51
 52
 53
 54
 55
 56
 57
 58
 59
 60
 61
 62
 63
 64
 65
 66
 67
 68
 69
 70
 71
 72
 73
 74
 75
 76
 77
 78
 79
 80
 81
 82
 83
 84
 85
 86
 87
 88
 89
 90
 91
 92
 93
 94
 95
 96
 97
 98
 99
100
101
102


```echarts
{
  "title": [
    {"text": "Timeline Chart", "left": "5%", "top": "5%"},
    {"text": "Pie Chart", "left": "55%", "top": "5%"},
    {"text": "Scatter Plot", "left": "5%", "top": "55%"},
    {"text": "Tangential Polar Chart", "left": "55%", "top": "55%"}
  ],
  "tooltip": {"trigger": "item"},
  "legend": {
    "orient": "vertical",
    "left": "left",
    "data": ["Series A", "Series B", "Series C"]
  },
  "grid": [
    {"left": "5%", "top": "15%", "width": "40%", "height": "35%"},
    {"left": "55%", "top": "15%", "width": "40%", "height": "35%"},
    {"left": "5%", "top": "55%", "width": "40%", "height": "35%"},
    {"left": "55%", "top": "55%", "width": "40%", "height": "35%"}
  ],
  "xAxis": [
    {"type": "time", "gridIndex": 0},
    {"type": "value", "gridIndex": 2}
  ],
  "yAxis": [
    {"type": "value", "gridIndex": 0},
    {"type": "value", "gridIndex": 2}
  ],
  "angleAxis": [{"type": "value", "startAngle": 0, "polarIndex": 0}],
  "radiusAxis": [{"polarIndex": 0}],
  "polar": [{"center": ["75%", "80%"], "radius": "30%", "gridIndex": 3}],
  "dataset": {
    "source": {
      "timelineA": [["2023-10-01", 10], ["2023-10-02", 20], ["2023-10-03", 15], ["2023-10-04", 25]],
      "timelineB": [["2023-10-01", 5], ["2023-10-02", 15], ["2023-10-03", 10], ["2023-10-04", 20]],
      "scatterA": [[1, 10], [2, 20], [3, 15], [4, 25]],
      "scatterB": [[1, 5], [2, 15], [3, 10], [4, 20]],
      "pie": [
        {"value": 335, "name": "Series A"},
        {"value": 310, "name": "Series B"},
        {"value": 274, "name": "Series C"}
      ],
      "polarA": [1, 2, 3],
      "polarB": [4, 5, 6]
    }
  },
  "series": [
    {
      "name": "Series A",
      "type": "line",
      "xAxisIndex": 0,
      "yAxisIndex": 0,
      "data": [["2023-10-01", 10], ["2023-10-02", 20], ["2023-10-03", 15], ["2023-10-04", 25]]
    },
    {
      "name": "Series B", 
      "type": "line",
      "xAxisIndex": 0,
      "yAxisIndex": 0,
      "data": [["2023-10-01", 5], ["2023-10-02", 15], ["2023-10-03", 10], ["2023-10-04", 20]]
    },
    {
      "name": "Pie Chart",
      "type": "pie",
      "radius": "50%",
      "center": ["75%", "30%"],
      "data": [
        {"value": 335, "name": "Series A"},
        {"value": 310, "name": "Series B"},
        {"value": 274, "name": "Series C"}
      ]
    },
    {
      "name": "Series A",
      "type": "scatter",
      "xAxisIndex": 1,
      "yAxisIndex": 1,
      "data": [[1, 10], [2, 20], [3, 15], [4, 25]]
    },
    {
      "name": "Series B",
      "type": "scatter",
      "xAxisIndex": 1,
      "yAxisIndex": 1,
      "data": [[1, 5], [2, 15], [3, 10], [4, 20]]
    },
    {
      "name": "Series A",
      "type": "bar",
      "polarIndex": 0,
      "data": [1, 2, 3],
      "coordinateSystem": "polar"
    },
    {
      "name": "Series B",
      "type": "bar",
      "polarIndex": 0,
      "data": [4, 5, 6],
      "coordinateSystem": "polar"
    }
  ]
}

4 Charts better (interactive) - click below to see the code

  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
 41
 42
 43
 44
 45
 46
 47
 48
 49
 50
 51
 52
 53
 54
 55
 56
 57
 58
 59
 60
 61
 62
 63
 64
 65
 66
 67
 68
 69
 70
 71
 72
 73
 74
 75
 76
 77
 78
 79
 80
 81
 82
 83
 84
 85
 86
 87
 88
 89
 90
 91
 92
 93
 94
 95
 96
 97
 98
 99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160


```echarts
{
  "title": [
    {"text": "Timeline Chart", "left": "5%", "top": "5%"},
    {"text": "Pie Chart", "left": "55%", "top": "5%"},
    {"text": "Scatter Plot", "left": "5%", "top": "55%"},
    {"text": "Tangential Polar Chart", "left": "55%", "top": "55%"}
  ],
  "tooltip": {"trigger": "item"},
  "toolbox": {
    "feature": {
      "dataZoom": {
        "yAxisIndex": "none"
      },
      "restore": {},
      "saveAsImage": {}
    }
  },
  "legend": {
    "orient": "vertical",
    "left": "left",
    "data": ["Series A", "Series B", "Series C"]
  },
  "grid": [
    {"left": "5%", "top": "15%", "width": "40%", "height": "35%"},
    {"left": "55%", "top": "15%", "width": "40%", "height": "35%"},
    {"left": "5%", "top": "55%", "width": "40%", "height": "35%"},
    {"left": "55%", "top": "55%", "width": "40%", "height": "35%"}
  ],
  "xAxis": [
    {"type": "time", "gridIndex": 0},
    {"type": "value", "gridIndex": 2}
  ],
  "yAxis": [
    {"type": "value", "gridIndex": 0},
    {"type": "value", "gridIndex": 2}
  ],
  "angleAxis": [{"type": "value", "startAngle": 0, "polarIndex": 0}],
  "radiusAxis": [{"polarIndex": 0}],
  "polar": [{"center": ["75%", "80%"], "radius": "30%", "gridIndex": 3}],
  "dataset": [
    {
      "id": "timelineData",
      "source": [
        ["date", "Series A", "Series B"],
        ["2023-10-01", 10, 5],
        ["2023-10-02", 20, 15],
        ["2023-10-03", 15, 10],
        ["2023-10-04", 25, 20]
      ]
    },
    {
      "id": "scatterData",
      "source": [
        ["x", "Series A", "Series B"],
        [1, 10, 5],
        [2, 20, 15],
        [3, 15, 10],
        [4, 25, 20]
      ]
    },
    {
      "id": "pieData",
      "source": [
        ["name", "value"],
        ["Series A", 335],
        ["Series B", 310],
        ["Series C", 274]
      ]
    },
    {
      "id": "polarData",
      "source": [
        ["angle", "Series A", "Series B"],
        [0, 1, 4],
        [1, 2, 5],
        [2, 3, 6]
      ]
    }
  ],
  "series": [
    {
      "name": "Series A",
      "type": "line",
      "datasetIndex": 0,
      "encode": {
        "x": "date",
        "y": "Series A"
      },
      "xAxisIndex": 0,
      "yAxisIndex": 0
    },
    {
      "name": "Series B", 
      "type": "line",
      "datasetIndex": 0,
      "encode": {
        "x": "date",
        "y": "Series B"
      },
      "xAxisIndex": 0,
      "yAxisIndex": 0
    },
    {
      "name": "Pie Chart",
      "type": "pie",
      "radius": "50%",
      "center": ["75%", "30%"],
      "datasetIndex": 2,
      "encode": {
        "itemName": "name",
        "value": "value"
      }
    },
    {
      "name": "Series A",
      "type": "scatter",
      "datasetIndex": 1,
      "encode": {
        "x": "x",
        "y": "Series A"
      },
      "xAxisIndex": 1,
      "yAxisIndex": 1
    },
    {
      "name": "Series B",
      "type": "scatter",
      "datasetIndex": 1,
      "encode": {
        "x": "x",
        "y": "Series B"
      },
      "xAxisIndex": 1,
      "yAxisIndex": 1
    },
    {
      "name": "Series A",
      "type": "bar",
      "datasetIndex": 3,
      "encode": {
        "angle": "angle",
        "radius": "Series A"
      },
      "polarIndex": 0,
      "coordinateSystem": "polar"
    },
    {
      "name": "Series B",
      "type": "bar",
      "datasetIndex": 3,
      "encode": {
        "angle": "angle",
        "radius": "Series B"
      },
      "polarIndex": 0,
      "coordinateSystem": "polar"
    }
  ]
}