关于echarst

简介: 关于echarst

首先去echarst官网下载echarst然后放在项目中的js文件钟引入,下面是代码:

<script src="js/echarts.js"></script>

在html中放置一个块:

<div id="main" style="width: 600px;height:400px;"></div>

在js中初始化这个块:

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

在js中创建option数据,option里面有很多配置项用来创建修改图标的类型与内容。具体看官方文档

var option = {
        title: {
          text: 'ECharts 入门示例'
        },
        tooltip: {},
        legend: {
          show:true,
          //data: ['销量']
          icon:'triangle',
        },
        xAxis: {
          //type : 'value', 
        },
        yAxis: {
          //type : 'category',
          data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子'],
        },
        series: [{
          name: '销量',
          type: tyr,
          data: [5, 20, 36, 10, 10, 20]
        }]
      };
      window.addEventListener('resize', function() {
        myChart.resize();
      });
      myChart.setOption(option);

最后是效果:

目录
相关文章
|
7月前
|
容器
关于弹性布局
关于弹性布局
63 1
|
7月前
|
前端开发
es6的一些方法
es6的一些方法
43 0
|
6月前
|
Python
程序技术好文:概率论与数理统计图式(第三章多维随机变量)
程序技术好文:概率论与数理统计图式(第三章多维随机变量)
17 0
|
7月前
|
前端开发
css去除滑动框
css去除滑动框
74 2
|
7月前
|
算法 JavaScript 前端开发
三个js算法
三个js算法
40 2
|
7月前
|
JavaScript 前端开发
js的filter函数
js的filter函数
59 1
|
7月前
|
JavaScript 前端开发
js的check函数
js的check函数
49 1
|
7月前
|
JavaScript 前端开发
js的事件介绍
js的事件介绍
40 1
|
7月前
|
JavaScript 前端开发
js的事件
js的事件
46 1
|
7月前
|
前端开发 程序员
前端的开发规范
前端的开发规范
348 0