ECharts 是一个纯 JS 开源图形库,最大的特点是操作简单,数据配置方便,支持数据动态展示。由百度开发,并持续维护,目前已经开发到第三版。
在 html 中使用方法
- <!DOCTYPE html>
- <html>
- <head>
- <meta charset="utf-8">
- <title>
- ECharts
- </title>
- <!-- 引入 echarts.js -->
- <script src="echarts.min.js">
- </script>
- </head>
- <body>
- <!-- 为ECharts准备一个具备大小(宽高)的Dom -->
- <div id="main" style="width: 600px;height:400px;">
- </div>
- <script type="text/javascript">
- // 基于准备好的dom,初始化echarts实例 var myChart = echarts.init(document.getElementById('main')); // 指定图表的配置项和数据 var option = { title: { text: 'ECharts 入门示例' }, tooltip: {}, legend: { data:['销量'] }, xAxis: { data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"] }, yAxis: {}, series: [{ name: '销量', type: 'bar', data: [5, 20, 36, 10, 10, 20] }] }; // 使用刚指定的配置项和数据显示图表。 myChart.setOption(option);
- </script>
- </body>
- </html>
1 配置 webpack
在 3.1.1 版本之前 ECharts 在 npm 上的 package 是非官方维护的,从 3.1.1 开始由官方 EFE 维护 npm 上 ECharts 和 zrender 的 package。
你可以使用如下命令通过 npm 安装 ECharts
- npm install echarts --save
2 引入 ECharts
采用 ES6 写法
- import React,
- {
- Component,
- PropTypes
- }
- from 'react';
- import echarts from 'echarts';
- class EChartsView 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"></div> ); }}
3 ECharts 用法笔记
主要通过 setOption 设置图形
其中 series 系列列表。每个系列通过 type 决定自己的图表类型,
Series 中 通过 类似 xAxisIndex 、radarIndex 来设置 图形投影到那个坐标系中。
就爱阅读 www.92to.com 网友整理上传, 为您提供最全的知识大全, 期待您的分享,转载请注明出处。
来源: