一个网站需要多少钱/营销网站建设规划
导入echarts.js文件
这个不多说，可自行下载，熟悉的可选择定制下载。
<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>
上面是一段简单的例子，下面进行介绍。
echarts 实例
上面一段代码是一个echarts实例，一个网页中可以创建多个 echarts 实例，每一实例内也同样可以有多个图表。每个实例独占一个节点，故开始要使用echarts.init方法进行实例的初始化。
series 系列
在 echarts 里，系列包括了图标的数据data、类型type、图标名字name等等。形式上是列表嵌套着字典，每个字典代表对应一个图表。
type：line（折线图）、bar（柱状图）、pie（饼图）、scatter（散点图）、graph（关系图）、tree（树）等等，可选项；- data：是一个列表类型，对应饼图来说，是列表嵌套字典，分别有name和value两个KEY；
- name：字符类型，可选选项；
- center：对应饼图，选择圆点，列表类型；
- radius：对应饼图，选择半径，INT类型；
- encode：从dataset获取数据，字典类型；
xAxisIndex：多个坐标系时，用于绑定；yAxisIndex：多个坐标系时，用于绑定；
data数据还可以被dataset所替代，与series同级的dataset是一个字典类型，里面的source键用于存放多组数据，类型是列表嵌套列表。数据从 dataset 中取，encode 中的数值是 dataset.source 的维度 index （即第几列）
component组件
在系列之上，echarts 中各种内容，被抽象为“组件”。例如，echarts 中至少有这些组件：
- xAxis（直角坐标系X轴）：gridIndex用于指定某个坐标系
- yAxis（直角坐标系 Y 轴）：gridIndex用于指定某个坐标系
- grid（直角坐标系底板）：直角坐标系内绘图网格，单个 grid 内最多可以放置上下两个 X 轴，左右两个 Y 轴。可以在网格上绘制折线图，柱状图，散点图（气泡图）
- angleAxis（极坐标系角度轴）
- radiusAxis（极坐标系半径轴）
- polar（极坐标系底板）
- geo（地理坐标系）
- dataZoom（数据区缩放组件）
- visualMap（视觉映射组件）
- tooltip（提示框组件）
- toolbox（工具栏组件）
- series（系列）
用 option 描述图表
option来描述其对图表的各种需求，包括：有什么数据、要画什么图表、图表长什么样子、含有什么组件、组件能操作什么事情等等。简而言之，option 表述了：数据、数据如何映射成图形、交互行为。
option 每个属性是一类组件，如果每一个键值有多个同类组件，那么就是个数组。
组件的定位
- 类 CSS 的绝对定位
多数组件和系列，都能够基于 top / right / down / left / width / height 绝对定位。
- [中心半径定位]
少数圆形的组件或系列，可以使用“中心半径定位”，例如，pie（饼图）、sunburst（旭日图）、polar（极坐标系）。中心半径定位，往往依据 center（中心）、radius（半径）来决定位置。
- [其他定位]
坐标系
一个坐标系，可能由多个组件协作而成。我们以最常见的直角坐标系来举例。直角坐标系中，包括有 xAxis（直角坐标系 X 轴）、yAxis（直角坐标系 Y 轴）、grid（直角坐标系底板）三种组件。xAxis、yAxis 被 grid 自动引用并组织起来，共同工作。
个性化图表的样式
ECharts 提供了丰富的自定义配置选项，并且能够从全局、系列、数据三个层级去设置数据图形的样式。南丁格尔图为例：
option = {backgroundColor: '#2c343c',visualMap: {show: false,min: 80,max: 600,inRange: {colorLightness: [0, 1]}},series : [{name: '访问来源',type: 'pie',radius: '55%',data:[{value:235, name:'视频广告'},{value:274, name:'联盟广告'},{value:310, name:'邮件营销'},{value:335, name:'直接访问'},{value:400, name:'搜索引擎'}],roseType: 'angle',label: {normal: {textStyle: {color: 'rgba(255, 255, 255, 0.3)'}}},labelLine: {normal: {lineStyle: {color: 'rgba(255, 255, 255, 0.3)'}}},itemStyle: {normal: {color: '#c23531',shadowBlur: 200,shadowColor: 'rgba(0, 0, 0, 0.5)'}}}]
};
-
阴影的配置
ECharts 中有一些通用的样式，诸如阴影、透明度、颜色、边框颜色、边框宽度等，这些样式一般都会在系列的 itemStyle 里设置。
itemStyle: {// 阴影的大小shadowBlur: 200,// 阴影水平方向上的偏移shadowOffsetX: 0,// 阴影垂直方向上的偏移shadowOffsetY: 0,// 阴影颜色shadowColor: 'rgba(0, 0, 0, 0.5)'
}itemStyle的emphasis是鼠标 hover 时候的高亮样式。
itemStyle: {emphasis: {shadowBlur: 200,shadowColor: 'rgba(0, 0, 0, 0.5)'}
}- 深色背景和浅色标签
把整个主题改成示例中那样的深色主题，这就需要改背景色和文本颜色。背景色是全局的，所以直接在 option 下设置 backgroundColor。文本的样式可以设置全局的 textStyle，也可以每个系列分别设置，每个系列的文本设置在 label.textStyle。饼图的话还要将标签的视觉引导线的颜色设为浅色。
setOption({backgroundColor: '#2c343c'
})setOption({textStyle: {color: 'rgba(255, 255, 255, 0.3)'}
})label: {textStyle: {color: 'rgba(255, 255, 255, 0.3)'}
}labelLine: {lineStyle: {color: 'rgba(255, 255, 255, 0.3)'}
}-
设置扇形的颜色
扇形的颜色也是在 itemStyle 中设置：
itemStyle: {// 设置扇形的颜色color: '#c23531',shadowBlur: 200,shadowColor: 'rgba(0, 0, 0, 0.5)'
}ECharts 中每个扇形颜色的可以通过分别设置 data 下的数据项实现。但是这次因为只有明暗度的变化，所以有一种更快捷的方式是通过 visualMap 组件将数值的大小映射到明暗度。
visualMap: {// 不显示 visualMap 组件，只用于明暗度的映射show: false,// 映射的最小值为 80min: 80,// 映射的最大值为 600max: 600,inRange: {// 明暗度的范围是 0 到 1colorLightness: [0, 1]}
}