zoukankan      html  css  js  c++  java
  • Echarts学习之路3(在react中使用)

    安装:

    npm install echarts --save

    demo

    import React, { Component } from 'react';
    // 引入 ECharts 主模块
    import echarts from 'echarts/lib/echarts';
    // 引入柱状图
    import  'echarts/lib/chart/bar';
    // 引入提示框和标题组件
    import 'echarts/lib/component/tooltip';
    import 'echarts/lib/component/title';
    class App extends Component {
      componentDidMount() {
            // 基于准备好的dom,初始化echarts实例
            var myChart = echarts.init(document.getElementById('main'));
            // 绘制图表
            myChart.setOption({
                title: { text: 'ECharts 入门示例' },
                tooltip: {},
                xAxis: {
                    data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"]
                },
                yAxis: {},
                series: [{
                    name: '销量',
                    type: 'bar',
                    data: [5, 20, 36, 10, 10, 20]
                }]
            });
        }
        render() {
            return (
                <div id="main" style={{  400, height: 400 }}></div>
            );
        }
      }
    
    export default App;
    

      

  • 相关阅读:
    07组 Beta冲刺 (2/5)
    第07组 Beta冲刺 (1/5)
    第07组 Alpha冲刺 总结
    ES相关
    集群与分布式
    idea使用总结
    Tomcat配置与启动与访问
    Web基础
    B/S与C/S架构
    一周视频学习总结
  • 原文地址:https://www.cnblogs.com/wyryuebanwan/p/10375062.html
Copyright © 2011-2022 走看看