echarts的简单用法

来源：互联网发布：单片机步进电机驱动器编辑：程序博客网时间：2024/06/05 22:40

1.js部分，将echarts.js引入，通过setoption的方法传入数据，

<script src="js/echarts.js"></script><SCRIPT type="text/javascript">$(document).ready(function () {    var myChart = echarts.init(document.getElementById('echartsWarp'));    // 指定图表的配置项和数据    option = {    title: {        text: '折线图堆叠'    },    tooltip: {        trigger: 'axis'    },    legend: {        data:['邮件营销','联盟广告','视频广告','直接访问','搜索引擎']    },    grid: {        left: '3%',        right: '4%',        bottom: '3%',        containLabel: true    },    toolbox: {        feature: {            //saveAsImage: {}        }    },    xAxis: {        type: 'category',        boundaryGap: false,        data: ['周一','周二','周三','周四','周五','周六','周日']    },    yAxis: {        type: 'value'    },    series: [        {            name:'邮件营销',            type:'line',            stack: '总量',            data:[120, 132, 101, 134, 90, 230, 210]        },        {            name:'联盟广告',            type:'line',            stack: '总量',            data:[220, 182, 191, 234, 290, 330, 310]        }    ]};    // 使用刚指定的配置项和数据显示图表。    myChart.setOption(option);    });

2.html的部分：

<div id="echartsWarp" style="width: 400px;height:260px;"></div>

阅读全文

0 0