Echarts助力Dify，给你的图表加上美颜

摘要：在数据可视化的领域，图表不仅仅是数据的展示工具，更是信息传递的桥梁。而在众多数据可视化框架中，ECharts无疑是一个广受欢迎的选择。它不仅功能强大，支持丰富的图表类型，还能提供细致入微的定制化设计，帮助用户创造出既美观又富有表现力的图表。而当ECharts与

在数据可视化的领域，图表不仅仅是数据的展示工具，更是信息传递的桥梁。而在众多数据可视化框架中，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{"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}
{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" }]}]}```