echarts基础使用

Posted 2021-03-04 neroi

echarts基础使用

最近由于需要，折腾了下echarts，简单说说使用过程8。

有些小朋友总是看不到我的教程下载在哪里，我写大一点，写明显一点。

下载

echarts官网，这里下载可以echarts。

npm官网下载

---

或者直接：（最好两个都下载了）

• npm install echarts
• npm install echarts-gl

引入：

<script src="dist/echarts.min.js"></script>
<script src="dist/echarts-gl.min.js"></script>

---

示例图案点我进入

随便拿个例子说事

看到这么多参数是不是感觉无从下手，不会使用？我给你简单分析下这个3D柱状图：

 <script>
        // 基于准备好的dom，初始化echarts实例
        let myChart = echarts.init(document.getElementById('main'));
        //X
        let x = {{ x|safe }};
        //Y
        let y = {{ y|safe }};
        //Z
        let data =
            {{ z }};
        option = {
            //柱状图主表放在上面的标签
            tooltip: {},
            //柱状图控制
            visualMap: {
                max: 50,
                inRange: {
                    color: ['#313695', '#4575b4', '#74add1', '#abd9e9', '#e0f3f8', '#ffffbf', '#fee090', '#fdae61', '#f46d43',
                        '#d73027', '#a50026']
                }
            },
            //X轴显示设置
            xAxis3D: {
                type: 'category',
                axisLabel: {
                    //这里是比较有用的，防止有些X轴数值显示不出来和竖直显示用
                    interval: 0,
                    formatter: function (value) {
                        return value.split("").join("
");
                    }
                },
                data: x
            },
            //y轴显示
            yAxis3D: {
                type: 'category',
                data: y
            },
            //z轴显示
            zAxis3D: {
                type: 'value'
            },
            //3D柱状图
            grid3D: {
                boxWidth: 200,
                boxDepth: 80,
                viewControl: {
                    // projection: 'orthographic'
                },
                light: {
                    main: {
                        intensity: 1.2,
                        shadow: true
                    },
                    ambient: {
                        intensity: 0.3
                    }
                }
            },
            //序列化要显示的数值
            series: [{
                type: 'bar3D',
                data: data.map(function (item) {
                    return {
                        value: [item[0], item[1], item[2]],
                    }
                }),
                shading: 'lambert',
                label: {
                    textStyle: {
                        fontSize: 15,
                        borderWidth: 1,
                    }
                },
                emphasis: {
                    label: {
                        textStyle: {
                            fontSize: 20,
                            color: '#900'
                        }
                    },
                    itemStyle: {
                        color: '#900'
                    }
                }
            }]
        };
        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
    </script>

是不是感觉还有很多参数不懂什么意思？我也在慢慢研究，但是你可以看看术语和配置项。

原创不易，点赞支持，谢谢^_^