Tailwind CSS on GitHub
EN中文

Echarts

Echarts是Datav最重要的图表插件之一,你可以基于它实现几乎所有的图表形式,例如:

Image

Echarts非常强大,具体的文档和示例可以在这里查看

只有在已有的Datav插件无法满足你的需求时,才去使用echarts,因为echarts相对来说性能和交互性都会比其它插件差一些

饼图示例

饼图是非常常用的图表,但是你无法通过Datav的原生插件来创建一个饼图,因此我们使用echarts插件来实现,下面的例子基于echarts官方示例来完成。

使用echart插件

进入仪表盘,选择新建图表 -> 可视化 -> Echarts,此时能看到下面这张图表:

Image

这张图表使用了模拟数据,自动为你生成的,同时你能在右侧的Options看到如下代码片段,请跟着代码注释来了解对应的功能:

// data:通过数据源传进来的数据,但是在下面代码没有使用,这里用的模拟数据
// theme: datav的theme对象,可以从里面获取相应的颜色等主题信息
// echartsInstance: echarts对象,具体可以在echarts官方了解用法
// setVariable, setTime, history 这三个我们在图表交互章节有详细介绍
function setEchartsOption(data, theme, echartsInstance, echarts, setVariable, setTime, history)   {
    // 为图表设置点击事件
    echartsInstance.off('click') 
    echartsInstance.on('click', (point) => {
        alert('chart on click')
        console.log(point)
    })

    // 模拟图表需要的数据
    var dataBJ = [SOME DATA...];

    var dataGZ = [SOME DATA...];

    var dataSH = [SOME DATA...];

    var schema = [
        {name: 'date', index: 0, text: '日'},
        {name: 'AQIindex', index: 1, text: 'AQI指数'},
        {name: 'PM25', index: 2, text: 'PM2.5'},
        {name: 'PM10', index: 3, text: 'PM10'},
        {name: 'CO', index: 4, text: '一氧化碳(CO)'},
        {name: 'NO2', index: 5, text: '二氧化氮(NO2)'},
        {name: 'SO2', index: 6, text: '二氧化硫(SO2)'}
    ];


    var itemStyle = {
        opacity: 0.8,
        shadowBlur: 10,
        shadowOffsetX: 0,
        shadowOffsetY: 0,
        shadowColor: 'rgba(0, 0, 0, 0.5)'
    };

    // 返回一个对象,包含图表的属性和数据,该对象对应的是echarts中的option对象
    return {
        backgroundColor: '#404a59',
        color: [
            '#dd4444', '#fec42c', '#80F1BE'
        ],
        legend: {
            top: 10,
            data: ['北京', '上海', '广州'],
            textStyle: {
                color: '#fff',
                fontSize: 16
            }
        },
        grid: {
            left: '10%',
            right: 150,
            top: '18%',
            bottom: '10%'
        },
        tooltip: {
            padding: 10,
            backgroundColor: '#222',
            borderColor: '#777',
            borderWidth: 1,
            formatter: function (obj) {
                var value = obj.value;
                return '<div style="border-bottom: 1px solid rgba(255,255,255,.3); font-size: 18px;padding-bottom: 7px;margin-bottom: 7px">'
                    + obj.seriesName + ' ' + value[0] + '日:'
                    + value[7]
                    + '</div>'
                    + schema[1].text + ':' + value[1] + '<br>'
                    + schema[2].text + ':' + value[2] + '<br>'
                    + schema[3].text + ':' + value[3] + '<br>'
                    + schema[4].text + ':' + value[4] + '<br>'
                    + schema[5].text + ':' + value[5] + '<br>'
                    + schema[6].text + ':' + value[6] + '<br>';
            }
        },
        xAxis: {
            type: 'value',
            name: '日期',
            nameGap: 16,
            nameTextStyle: {
                color: '#fff',
                fontSize: 14
            },
            max: 31,
            splitLine: {
                show: false
            },
            axisLine: {
                lineStyle: {
                    color: '#eee'
                }
            }
        },
        yAxis: {
            type: 'value',
            name: 'AQI指数',
            nameLocation: 'end',
            nameGap: 20,
            nameTextStyle: {
                color: '#fff',
                fontSize: 16
            },
            axisLine: {
                lineStyle: {
                    color: '#eee'
                }
            },
            splitLine: {
                show: false
            }
        },
        visualMap: [
            {
                left: 'right',
                top: '10%',
                dimension: 2,
                min: 0,
                max: 250,
                itemWidth: 30,
                itemHeight: 120,
                calculable: true,
                precision: 0.1,
                text: ['圆形大小:PM2.5'],
                textGap: 30,
                textStyle: {
                    color: '#fff'
                },
                inRange: {
                    symbolSize: [10, 70]
                },
                outOfRange: {
                    symbolSize: [10, 70],
                    color: ['rgba(255,255,255,.2)']
                },
                controller: {
                    inRange: {
                        color: ['#c23531']
                    },
                    outOfRange: {
                        color: ['#444']
                    }
                }
            },
            {
                left: 'right',
                bottom: '5%',
                dimension: 6,
                min: 0,
                max: 50,
                itemHeight: 120,

                precision: 0.1,
                text: ['明暗:二氧化硫'],
                textGap: 30,
                textStyle: {
                    color: '#fff'
                },
                inRange: {
                    colorLightness: [1, 0.5]
                },
                outOfRange: {
                    color: ['rgba(255,255,255,.2)']
                },
                controller: {
                    inRange: {
                        color: ['#c23531']
                    },
                    outOfRange: {
                        color: ['#444']
                    }
                }
            }
        ],
        series: [
            {
                name: '北京',
                type: 'scatter',
                itemStyle: itemStyle,
                data: dataBJ
            },
            {
                name: '上海',
                type: 'scatter',
                itemStyle: itemStyle,
                data: dataSH
            },
            {
                name: '广州',
                type: 'scatter',
                itemStyle: itemStyle,
                data: dataGZ
            }
        ]
    }
}

现在我们大概了解要怎么配置echarts插件,那么开始构建之前提到的饼图。

修改饼图配置

前往echarts饼图官方示例,可以看到官方例子中,左边是配置代码,右边是具体的图表,你可以在线修改 配置代码,看看会发生什么。

接着拷贝左边的示例代码中option对象的值(花括号以及里面的内容),然后拷贝到Datav的echarts插件编辑中,替换掉return后面的对象, 接着删除return之前的大部分代码,只保留点击事件的代码, 修改后,代码如下:

function setEchartsOption(data, theme, echartsInstance, echarts, setVariable, setTime, history)   {
    // Add click event for our chart
    echartsInstance.off('click') // clear side effects
    echartsInstance.on('click', (point) => {
        alert('chart on click')
        console.log(point)
    })

    // return a chart object, contains chart attributes and data, this object is as same as echarts option object
    return {
        backgroundColor: '#2c343c',

        title: {
            text: 'Customized Pie',
            left: 'center',
            top: 20,
            textStyle: {
                color: '#ccc'
            }
        },

        tooltip: {
            trigger: 'item',
            formatter: '{a} <br/>{b} : {c} ({d}%)'
        },

        visualMap: {
            show: false,
            min: 80,
            max: 600,
            inRange: {
                colorLightness: [0, 1]
            }
        },
        series: [
            {
                name: '访问来源',
                type: 'pie',
                radius: '55%',
                center: ['50%', '50%'],
                data: [
                    {value: 335, name: '直接访问'},
                    {value: 310, name: '邮件营销'},
                    {value: 274, name: '联盟广告'},
                    {value: 235, name: '视频广告'},
                    {value: 400, name: '搜索引擎'}
                ].sort(function (a, b) { return a.value - b.value; }),
                roseType: 'radius',
                label: {
                    color: 'rgba(255, 255, 255, 0.3)'
                },
                labelLine: {
                    lineStyle: {
                        color: 'rgba(255, 255, 255, 0.3)'
                    },
                    smooth: 0.2,
                    length: 10,
                    length2: 20
                },
                itemStyle: {
                    color: '#c23531',
                    shadowBlur: 200,
                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                },

                animationType: 'scale',
                animationEasing: 'elasticOut',
                animationDelay: function (idx) {
                    return Math.random() * 200;
                }
            }
        ]
    };
}

此时我们的饼图已经渲染出来,简单吧?

Image

图表互动

echarts同样支持图表互动,通过点击事件来完成. 在setEchartsOption函数中添加/修改以下代码:

function setEchartsOption(data, theme, echartsInstance, echarts, setVariable, setTime, history)   {
    echartsInstance.off('click') // clear side effects
    echartsInstance.on('click', (point) => {
        // 在这里设置点击事件...
        
        // 设置模版变量
        setVariable('app','gateway')
        // 设置当前时间
        setTime('2020-12-09 00:00:00', '2020-12-10 00:00:00')
        // 前往指定页面
        history.push('/apps/$app') // setEchartsOption函数支持模版变量替换
    })

    .
    .
    .
}

细心的读者应该发现了,在`setEchartsOption`中,支持使用模版变量

使用方式总结

掌握以下五点,基本上你就能做出自己想要的任何图表:

  1. 在echarts官网找到你感兴趣的官方示例
  2. 复制option对象的值,替换我们的setEchartsOption中的return对象, 因为return返回的就是echarts的option配置
  3. 把echarts官网例子中option之前的代码复制,然后放在我们的setEchartsOptionreturn之前
  4. 真实数据需要使用setEchartsOptiondata参数,处理后生成echarts图表需要的数据格式
  5. 查看echarts文档,了解如何个性化配置图表

更多示例

更多示例请访问Datav在线Demo,搜索echarts,查看相关图表