echarts formatter_Echarts多Y轴探索

最新推荐文章于 2023-12-20 17:15:00 发布

weixin_39622568

最新推荐文章于 2023-12-20 17:15:00 发布

阅读量545

点赞数

ECharts，一个纯 Javascript 的图表库，可以流畅的运行在 PC 和移动设备上，兼容当前绝大部分浏览器(IE8/9/10/11，Chrome，Firefox，Safari等)，底层依赖轻量级的 Canvas 类库 ZRender ，提供直观，生动，可交互，可高度个性化定制的数据可视化图表。用过好多图表库，还是对Echarts最有好感。：)本文使用Echarts来给出 多Y轴的实例。

在给出多Y轴实例前，咱们首先来看一下Echarts实现图形化的基本步骤；单Y轴实例；双Y轴实例。本文采用的ECharts版本为 3.2.2 ，大家可以到ECharts的下载页面下载。

一、ECharts图形化步骤

1.1 引入ECharts

将下载的 echarts.min.js文件，使用标签引入。

<html><head>    <meta charset="utf-8">        <script src="echarts.min.js">script>head>html>

1.2 指定图形展示区域

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

1.3 初始化echarts实例

 // 基于准备好的dom，初始化echarts实例 var myChart = echarts.init(document.getElementById('main'));

1.4 指定配置项和数据

// 指定图表的配置项和数据        var option = {
                title: {
                    text: 'ECharts 入门示例'            },            tooltip: {},            legend: {
                    data:['销量']            },            xAxis: {
                    data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]            },            yAxis: {},            series: [{
                    name: '销量',                type: 'bar',                data: [5, 20, 36, 10, 10, 20]            }]        };

1.5 设置Option显示图表

       // 使用刚指定的配置项和数据显示图表。        myChart.setOption(option);

一个ECharts官网示例如下：

<html><head>    <meta charset="utf-8">    <title>EChartstitle>        <script src="echarts.min.js">script>head><body>        <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>

二、单Y轴

如下给出一个 2016年每月新增设备数的柱状图，数据纯属虚构。 2.1 代码

<head><meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″><title>EChartstitle>head><body>    <div id="main" style="height: 500px; width: 1200px">div>    <script src="echarts.min.js">script>  <script type="text/javascript">    // 基于准备好的dom，初始化echarts图表    var myChart = echarts.init(document.getElementById('main'));    option = {
          tooltip : {
            t

最低0.47元/天解锁文章

weixin_39622568

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
echarts formatter_Echarts多Y轴探索

ECharts，一个纯 Javascript 的图表库，可以流畅的运行在 PC 和移动设备上，兼容当前绝大部分浏览器(IE8/9/10/11，Chrome，Firefox，Safari等)，底层依赖轻量级的 Canvas 类库ZRender，提供直观，生动，可交互，可高度个性化定制的数据可视化图表。用过好多图表库，还是对Echarts最有好感。：)本文使用Echarts来给出多Y轴的实...
复制链接

扫一扫