visualmap折线图_echarts3 使用总结（绘制各种图表,地图）

由于项目需要自学了echarts，下面将学到的东西总结如下，如果有哪里写的不好，请批评指正

一、前期准备

1、使用echarts之前先要引入echarts.js，js可以到官网下载

2、写一个div容器用来装echarts内容，这个容器必须有高度，不然看不到内容。

3、在script中获取div容器的id，根据需要写option中的参数(也许你现在还不知道option是干嘛用的，不要着急往下看)，使用setoption生成图表。

(代码如下)注：后面将不再对引入js，获取id，调用option生成图表做赘述

Document

获取容器的id并赋值给变量myChart

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

/*用来配置参数*/

option = {

}

/*调用option生成图表*/

myChart.setOption(option)

二、各种图表使用

1、柱状图代码

Document

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

myChart.title = '坐标轴刻度与标签对齐';

option = {

color: ['#3398DB'],

tooltip : {

trigger: 'axis',

axisPointer : { // 坐标轴指示器，坐标轴触发有效

type : 'shadow' // 默认为直线，可选为：'line' | 'shadow'

}

},

grid: {

left: '3%',

right: '4%',

bottom: '3%',

containLabel: true

},

xAxis : [

{

type : 'category',

data : ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],

axisTick: {

alignWithLabel: true

}

}

],

yAxis : [

{

type : 'value'

}

],

series : [

{

name:'直接访问',

type:'bar',

barWidth: '60%',

data:[10, 52, 200, 334, 390, 330, 220]

}

]

};

myChart.setOption(option)

运行结果

2、折线图

Document

var myChart13 = echarts.init(document.getElementById('pic4'));

var data = [];

option15 = {

title: {

text: '曲线',

},

tooltip: {

trigger: 'axis',

},

legend: {

data:['昨日(11月8日)','今日(11月9日)']

},