echarts

265 阅读1分钟

title:

显示标题

title.text=''---- string---- 主标题文本,支持使用 \n 换行。

title. textStyle---- 一些基本的CSS样式都可以使用

image.png

tooltip:

提示信息

legend:

图例

image.png

坐标轴:

X轴

xAxis3D.show---- boolean---- 是否显示 x 轴。

xAxis3D.name = 'X'---- string---- 坐标轴名称。

xAxis3D.grid3DIndex---- number---- 坐标轴使用的 grid3D 组件的索引。默认使用第一个 grid3D 组件。

Y轴

yAxis3D.show---- boolean---- 是否显示 y 轴。

yAxis3D.name = 'Y'---- string---- 坐标轴名称。

yAxis3D.grid3DIndex---- number---- 坐标轴使用的 grid3D 组件的索引。默认使用第一个 grid3D 组件。

series--数据:

series-scatter3D. type ** = 'scatter3D'

string series-scatter3D.name---- string---- 系列名称,用于 tooltip 的显示,legend 的图例筛选,在 setOption 更新数据和配置项时用于指定对应的系列。

<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 入门示例',//内容
                textStyle:{
                    color:'red'
                }
            },
            tooltip: {},//提示信息
            legend: {//图例
                data:['一月销量','二月销量']
            },
            xAxis: {//X轴 横向
                data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
            },
            yAxis: {},//Y轴 纵向 动态 根据数据自动计算
            series: [{//数据
                name: '一月销量',//和legend.data要一致
                type: 'line',//line折线图 bar柱状图
                data: [5, 20, 36, 10, 10, 20],//和xAxis.data一致
                // smooth:1,平滑曲线 1-10
            },{
                name: '二月销量',//和legend.data要一致
                type: 'line',//折线图 柱状图
                data: [15, 15, 30, 17, 5, 22.]//和xAxis.data一致
            }]
        };

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

效果图

image.png