zoukankan      html  css  js  c++  java
  • 在Html中使用echarts图表

    命令安装:npm install echarts --save

    在index.html的<head></head>标签中引入echarts

      <script src="https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js"></script>
      或者是在官网直接下载echarts.min.js文件在引入
     
    在项目的入口文件man.js中
      import echarts from "echarts"
     
    在需要用到的页面中创建实例
      
      <div id="myChart" ref="myChart" style=" 600px;height:400px;"></div>
      
      var echarts = require('echarts');
     
        var myChart = echarts.init(document.getElementById('myChart'));
        // 指定图表的配置项和数据
        var option = {
          title: {
            text: '示例'
          },
          tooltip: {},
          legend: {
            data:['销量']
          },
          xAxis: {
            data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
          },
          yAxis: {},
          series: [{
            name: '销量',
            type: 'bar',
            data: [5, 20, 36, 10, 10, 20]
          }]
        };
        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
  • 相关阅读:
    linux下的make命令
    安装pytorch
    CondaError: Downloaded bytes did not match Content-Length
    cv2.VideoCapture(0)
    cv2.imread(),cv2.imshow(),cv2.imwrite()
    unsqueeze()和squeeze()
    django.core.exceptions.ImproperlyConfigured: Error loading MySQLdb module
    Can't connect to MySQL server on '127.0.0.1' (10061)
    ping ip
    _vimrc配置
  • 原文地址:https://www.cnblogs.com/qianxiaoniantianxin/p/14824629.html
Copyright © 2011-2022 走看看