蜗牛学院的html网页成像,echarts1.html

后台登录-X-admin2.2

特别声明：ECharts，一个纯 Javascript 的图表库，可以流畅的运行在 PC 和移动设备上，兼容当前绝大部分浏览器(IE8/9/10/11，Chrome，Firefox，Safari等)，底层依赖轻量级的 Canvas 类库 ZRender，提供直观，生动，可交互，可高度个性化定制的数据可视化图表。如需使用，详细了解可以访问官网 ECharts。 x-admin不承担任何版权问题。

注意：本案例的Echarts图表库由cdn引入，需要在线才能正常使用，如想离线，请至Echarts官网下载。

// 基于准备好的dom，初始化echarts实例

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

// 指定图表的配置项和数据

var 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]

},

{

name:'视频广告',

type:'line',

stack: '总量',

data:[150, 232, 201, 154, 190, 330, 410]

},

{

name:'直接访问',

type:'line',

stack: '总量',

data:[320, 332, 301, 334, 390, 330, 320]

},

{

name:'搜索引擎',

type:'line',

stack: '总量',

data:[820, 932, 901, 934, 1290, 1330, 1320]

}

]

};

// 使用刚指定的配置项和数据显示图表。

myChart.setOption(option);

var _hmt = _hmt || [];

(function() {

var hm = document.createElement("script");

hm.src = "https://hm.baidu.com/hm.js?b393d153aeb26b46e9431fabaf0f6190";

var s = document.getElementsByTagName("script")[0];

s.parentNode.insertBefore(hm, s);

})();

一键复制

编辑

Web IDE

原始数据

按行查看

历史