简单入门echart方法

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
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 一、简单入门 1.从官网下载echarts http://echarts.baidu.com/download.h...
    X_smart阅读 7,724评论 0 7
  • 最近在弄商城的图表数据,要用到了echart.js,echart是支持多种图表的,有折线图,饼图,柱形图等等,我们...
    AlisaMfz阅读 5,608评论 0 2
  • 此次后台使用的语言是PHP,遇到的问题就是后台的数组传递到前台,前台页面控制台输出的是Arra{native co...
    youthz阅读 7,492评论 0 2
  • 一、简单介绍 Echart是百度研发团队开发的一款报表视图JS插件,功能十分强大,使用内容做简单记录;(EChar...
    Marin_chen阅读 21,820评论 9 5
  • 一、什么是echarts echarts是一个使用JavaScript实现的开源可视化库。可以使用echarts制...
    我王某不需要昵称阅读 4,816评论 0 1