1. echarts入门

  1. 引入echarts
  2. 获取容器DOM
  3. 使用echrats.init(DOM)初始化图表容器
  4. 调用setOption,进行配置
  5. 自定义主题直接去官网进行构建,并复制官网生成的JS代码进行粘贴即可
       const chartDom = document.getElementById('chart');
        /**
         * 参数1:容器DOM
         * 参数2:主题名称
         * 参数3:渲染方式,默认canvas
         */
        const chart = echarts.init(chartDom, 'westeros', {
            renderer: 'svg'
        });
        chart.setOption({
            title: {
                text: 'ECharts 入门案例'
            },
            xAxis: {
                // X轴单位,对应的数据为series.data的数据
                data: ['食品', '数码', '服饰', '箱包']
            },
            yAxis: {},
            series: {
                type: 'bar',
                data: [100, 120, 90, 150]
            }
        });
posted @ 2022-05-27 10:09  见信  阅读(48)  评论(0)    收藏  举报