美文网首页
简单入门echart方法

简单入门echart方法

作者: 金药 | 来源:发表于2022-04-13 14:21 被阅读0次

1.引入echart库

import * as echarts from 'echarts';

2.初始化echart,找到div的id

 var myChart = echarts.init(document.getElementById('main'));

3.设置option

 var option = {
      title: {
        text: 'ECharts 入门示例'
      },
      tooltip: {},
      legend: {
        data:['销量']
      },
      xAxis: {
        data: ['衬衫','羊毛衫','雪纺衫','裤子','高跟鞋','袜子']
      },
      yAxis: {},
      series: [{
        name: '销量',
        type: 'bar',
        data: [5, 20, 36, 10, 10, 20]
      }]

4.将option设置到mychart里面

myChart.setOption(option);

5.渲染插件需要放的地方

 <div id="main" style={{width: '600px', height:'400px'}}></div>

效果图


image.png

相关文章

  • echart启航

    构建简单echart图表:参考:Echart官网 查看官方文档说明 下载echart脚本Echart官方网站 下载...

  • vue引入echart常见问题

    导入echart正常,导入china.js就报错 原因是china.js里面导入echart的方法,在webpac...

  • echarts

    echart 入门教程 http://www.imooc.com/view/687 一.浏览器画图原理简介 1.C...

  • echart实现图例legend绑定数据

    echart为我们提供了简单的实现图例的接口,同时还可以进行许多动画操作,但是因为echart将图例封装的太好,导...

  • 一文入手Echart

    本文主要介绍Echart的入门使用如有需要,可以参考如有帮助,不忘 点赞 ❥ 前文预热 1)简介: ECharts...

  • OL3和echart的结合

    概述 本文讲述OL3结合echart,实现echart中的炫酷特效。 效果 echart3 echart2 说明:...

  • Echart绘制简单图表

    Echart.js官网http://echarts.baidu.com/examples.html 引入EChar...

  • Angular2 ngx-eChart的导入使用

    引入ngx-eChart 安装echart包、ngx-echart包 angular.json中引入echarts...

  • vue组建之——模拟K线数据

    子组建: // Echart图表 import Echart...

  • vue 中Echart的简单使用

    公司有图表需求,简单记录一下echart[https://echarts.apache.org/zh/index....

网友评论

      本文标题:简单入门echart方法

      本文链接:https://www.haomeiwen.com/subject/memtertx.html