Echarts助力Dify，给你的图表加上美颜
简介
在数据可视化的领域，图表不仅仅是数据的展示工具，更是信息传递的桥梁。而在众多数据可视化框架中，ECharts无疑是一个广受欢迎的选择。它不仅功能强大，支持丰富的图表类型，还能提供细致入微的定制化设计，帮助用户创造出既美观又富有表现力的图表。而当ECharts与Dify结合时，带来的不仅是图表的美观，更是让数据展示变得更加直观和易于理解的全新体验。
样例
本次没有使用任何的大模型，主要是测试Echarts在Dify中的表现。
主要是使用DIFY的问题分类器做简单的切换。
实现方式
直接在Dify的回复组件中编写即可
```echarts
# echarts 相关代码。可以从https://echarts.apache.org/examples/zh/index.html#chart-type-themeRiver
# 官网获取
```柱状图
```echarts
{
"xAxis": {
"type": "category",
"data": ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"]
},
"yAxis": {
"type": "value"
},
"series": [
{
"data": [120, 200, 150, 80, 70, 110, 130],
"type": "bar"
}
]
}
```
折线图
```echarts
{
"xAxis": {
"type": "category",
"data": ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"]
},
"yAxis": {
"type": "value"
},
"series": [
{
"data": [150, 230, 224, 218, 135, 147, 260],
"type": "line"
}
]
}
```基础面积图
```echarts
{
"xAxis": {
"type": "category",
"boundaryGap": false,
"data": ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"]
},
"yAxis": {
"type": "value"
},
"series": [
{
"data": [820, 932, 901, 934, 1290, 1330, 1320],
"type": "line",
"areaStyle": {}
}
]
}
```折线图堆叠
```echarts
{
"title": {
"text": "Stacked Line"
},
"tooltip": {
"trigger": "axis"
},
"legend": {
"data": ["Email", "Union Ads", "Video Ads", "Direct", "Search Engine"]
},
"grid": {
"left": "3%",
"right": "4%",
"bottom": "3%",
"containLabel": true
},
"toolbox": {
"feature": {
"saveAsImage": {}
}
},
"xAxis": {
"type": "category",
"boundaryGap": false,
"data": ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"]
},
"yAxis": {
"type": "value"
},
"series": [
{
"name": "Email",
"type": "line",
"stack": "Total",
"data": [120, 132, 101, 134, 90, 230, 210]
},
{
"name": "Union Ads",
"type": "line",
"stack": "Total",
"data": [220, 182, 191, 234, 290, 330, 310]
},
{
"name": "Video Ads",
"type": "line",
"stack": "Total",
"data": [150, 232, 201, 154, 190, 330, 410]
},
{
"name": "Direct",
"type": "line",
"stack": "Total",
"data": [320, 332, 301, 334, 390, 330, 320]
},
{
"name": "Search Engine",
"type": "line",
"stack": "Total",
"data": [820, 932, 901, 934, 1290, 1330, 1320]
}
]
}
```交错正负轴标签
```echarts
{
"title": {
"text": "Bar Chart with Negative Value"
},
"tooltip": {
"trigger": "axis",
"axisPointer": {
"type": "shadow"
}
},
"grid": {
"top": 80,
"bottom": 30
},
"xAxis": {
"type": "value",
"position": "top",
"splitLine": {
"lineStyle": {
"type": "dashed"
}
}
},
"yAxis": {
"type": "category",
"axisLine": { "show": false },
"axisLabel": { "show": false },
"axisTick": { "show": false },
"splitLine": { "show": false },
"data": [
"ten",
"nine",
"eight",
"seven",
"six",
"five",
"four",
"three",
"two",
"one"
]
},
"series": [
{
"name": "Cost",
"type": "bar",
"stack": "Total",
"label": {
"show": true,
"formatter": "{b}"
},
"data": [
{ "value": -0.07, "label": "labelRight" },
{ "value": -0.09, "label": "labelRight" },
0.2,
0.44,
{ "value": -0.23, "label": "labelRight" },
0.08,
{ "value": -0.17, "label": "labelRight" },
0.47,
{ "value": -0.36, "label": "labelRight" },
0.18
]
}
]
}
```圆角环形图
```echarts
{
"tooltip": {
"trigger": "item"
},
"legend": {
"top": "5%",
"left": "center"
},
"series": [
{
"name": "Access From",
"type": "pie",
"radius": ["40%", "70%"],
"avoidLabelOverlap": false,
"itemStyle": {
"borderRadius": 10,
"borderColor": "#fff",
"borderWidth": 2
},
"label": {
"show": false,
"position": "center"
},
"emphasis": {
"label": {
"show": true,
"fontSize": 40,
"fontWeight": "bold"
}
},
"labelLine": {
"show": false
},
"data": [
{ "value": 1048, "name": "Search Engine" },
{ "value": 735, "name": "Direct" },
{ "value": 580, "name": "Email" },
{ "value": 484, "name": "Union Ads" },
{ "value": 300, "name": "Video Ads" }
]
}
]
}
```嵌套环形图
```echarts
{
"tooltip": {
"trigger": "item",
"formatter": "{a} <br/>{b}: {c} ({d}%)"
},
"legend": {
"data": [
"Direct",
"Marketing",
"Search Engine",
"Email",
"Union Ads",
"Video Ads",
"Baidu",
"Google",
"Bing",
"Others"
]
},
"series": [
{
"name": "Access From",
"type": "pie",
"selectedMode": "single",
"radius": [0, "30%"],
"label": {
"position": "inner",
"fontSize": 14
},
"labelLine": {
"show": false
},
"data": [
{ "value": 1548, "name": "Search Engine" },
{ "value": 775, "name": "Direct" },
{ "value": 679, "name": "Marketing", "selected": true }
]
},
{
"name": "Access From",
"type": "pie",
"radius": ["45%", "60%"],
"labelLine": {
"length": 30
},
"label": {
"formatter": "{a|{a}}{abg|}\n{hr|}\n {b|{b}：}{c} {per|{d}%} ",
"backgroundColor": "#F6F8FC",
"borderColor": "#8C8D8E",
"borderWidth": 1,
"borderRadius": 4,
"rich": {
"a": {
"color": "#6E7079",
"lineHeight": 22,
"align": "center"
},
"hr": {
"borderColor": "#8C8D8E",
"width": "100%",
"borderWidth": 1,
"height": 0
},
"b": {
"color": "#4C5058",
"fontSize": 14,
"fontWeight": "bold",
"lineHeight": 33
},
"per": {
"color": "#fff",
"backgroundColor": "#4C5058",
"padding": [3, 4],
"borderRadius": 4
}
}
},
"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": 135, "name": "Video Ads" },
{ "value": 102, "name": "Others" }
]
}
]
}
```自定义雷达图
```echarts
{
"color": ["#67F9D8", "#FFE434", "#56A3F1", "#FF917C"],
"title": {
"text": "Customized Radar Chart"
},
"legend": {},
"radar": [
{
"indicator": [
{ "text": "Indicator1" },
{ "text": "Indicator2" },
{ "text": "Indicator3" },
{ "text": "Indicator4" },
{ "text": "Indicator5" }
],
"center": ["25%", "50%"],
"radius": 120,
"startAngle": 90,
"splitNumber": 4,
"shape": "circle",
"axisName": {
"formatter": "【{value}】",
"color": "#428BD4"
},
"splitArea": {
"areaStyle": {
"color": ["#77EADF", "#26C3BE", "#64AFE9", "#428BD4"],
"shadowColor": "rgba(0, 0, 0, 0.2)",
"shadowBlur": 10
}
},
"axisLine": {
"lineStyle": {
"color": "rgba(211, 253, 250, 0.8)"
}
},
"splitLine": {
"lineStyle": {
"color": "rgba(211, 253, 250, 0.8)"
}
}
},
{
"indicator": [
{ "text": "Indicator1", "max": 150 },
{ "text": "Indicator2", "max": 150 },
{ "text": "Indicator3", "max": 150 },
{ "text": "Indicator4", "max": 120 },
{ "text": "Indicator5", "max": 108 },
{ "text": "Indicator6", "max": 72 }
],
"center": ["75%", "50%"],
"radius": 120,
"axisName": {
"color": "#fff",
"backgroundColor": "#666",
"borderRadius": 3,
"padding": [3, 5]
}
}
],
"series": [
{
"type": "radar",
"emphasis": {
"lineStyle": {
"width": 4
}
},
"data": [
{
"value": [100, 8, 0.4, -80, 2000],
"name": "Data A"
},
{
"value": [60, 5, 0.3, -100, 1500],
"name": "Data B",
"areaStyle": {
"color": "rgba(255, 228, 52, 0.6)"
}
}
]
},
{
"type": "radar",
"radarIndex": 1,
"data": [
{
"value": [120, 118, 130, 100, 99, 70],
"name": "Data C",
"symbol": "rect",
"symbolSize": 12,
"lineStyle": {
"type": "dashed"
},
"label": {
"show": true,
"formatter": "function (params) { return params.value; }"
}
},
{
"value": [100, 93, 50, 90, 70, 60],
"name": "Data D",
"areaStyle": {
"color": {
"type": "radial",
"x": 0.1,
"y": 0.6,
"r": 1,
"colorStops": [
{
"color": "rgba(255, 145, 124, 0.1)",
"offset": 0
},
{
"color": "rgba(255, 145, 124, 0.9)",
"offset": 1
}
]
}
}
}
]
}
]
}
```漏斗图
```echarts
{
"title": {
"text": "Funnel"
},
"tooltip": {
"trigger": "item",
"formatter": "{a} <br/>{b} : {c}%"
},
"toolbox": {
"feature": {
"dataView": { "readOnly": false },
"restore": {},
"saveAsImage": {}
}
},
"legend": {
"data": ["Show", "Click", "Visit", "Inquiry", "Order"]
},
"series": [
{
"name": "Funnel",
"type": "funnel",
"left": "10%",
"top": 60,
"bottom": 60,
"width": "80%",
"min": 0,
"max": 100,
"minSize": "0%",
"maxSize": "100%",
"sort": "descending",
"gap": 2,
"label": {
"show": true,
"position": "inside"
},
"labelLine": {
"length": 10,
"lineStyle": {
"width": 1,
"type": "solid"
}
},
"itemStyle": {
"borderColor": "#fff",
"borderWidth": 1
},
"emphasis": {
"label": {
"fontSize": 20
}
},
"data": [
{ "value": 60, "name": "Visit" },
{ "value": 40, "name": "Inquiry" },
{ "value": 20, "name": "Order" },
{ "value": 80, "name": "Click" },
{ "value": 100, "name": "Show" }
]
}
]
}
```