基础 · 前端小册

[TOC] # 导入 ## Vue 项目引入 1、`npm install echarts` 2、main.js 添加如下代码 ```js import echarts from 'echarts' Vue.prototype.$echarts = echarts ``` 3、使用时注意将`echarts.init()` 之类的改为`this.$echarts.init(dom)`，`new this.$echarts.graphic.LinearGradient` >TODO：按需导入? # 入门示例 ```html <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>ECharts</title>  <script src="echarts.min.js"></script> </head> <body>  <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 入门示例' }, tooltip: {}, legend: { data:['销量'] }, xAxis: { data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"] }, yAxis: {}, series: [{ name: '销量', type: 'bar', data: [5, 20, 36, 10, 10, 20] }] }; // 使用刚指定的配置项和数据显示图表。 myChart.setOption(option); </script> </body> </html> ``` # 设置样式 ECharts 提供了丰富的自定义配置选项，并且能够从全局、系列、数据三个层级去设置数据图形的样式。 ## 颜色主题（Theme）可以使用默认的主题： ```js var chart = echarts.init(dom, 'light'); var chart = echarts.init(dom, 'dark'); ``` 如果主题保存为 JSON 文件，那么可以自行加载和注册，例如： ```js // 假设主题名称是 "vintage" $.getJSON('xxx/xxx/vintage.json', function (themeJSON) { echarts.registerTheme('vintage', JSON.parse(themeJSON)) var chart = echarts.init(dom, 'vintage'); }); ``` 如果保存为 UMD 格式的 JS 文件，那么支持了自注册，直接引入 JS 文件即可： ```js // HTML 引入 vintage.js 文件后（假设主题名称是 "vintage"） var chart = echarts.init(dom, 'vintage'); // ... ``` ## 调色盘调色盘，可以在 option 中设置。它给定了一组颜色，图形、系列会自动从其中选择颜色。可以设置全局的调色盘，也可以设置系列自己专属的调色盘。 ```js option = { // 全局调色盘。 color: ['#c23531','#2f4554', '#61a0a8', '#d48265', '#91c7ae','#749f83', '#ca8622', '#bda29a','#6e7074', '#546570', '#c4ccd3'], series: [{ type: 'bar', // 此系列自己的调色盘。 color: ['#dd6b66','#759aa0','#e69d87','#8dc1a9','#ea7e53','#eedd78','#73a373','#73b9bc','#7289ab', '#91ca8c','#f49f42'], ... }, { type: 'pie', // 此系列自己的调色盘。 color: ['#37A2DA', '#32C5E9', '#67E0E3', '#9FE6B8', '#FFDB5C','#ff9f7f', '#fb7293', '#E062AE', '#E690D1', '#e7bcf3', '#9d96f5', '#8378EA', '#96BFFF'], ... }] } ``` 调色盘的作用？？？？ ## 直接样式设置（itemStyle、lineStyle、areaStyle、label、...） ## 视觉映射（visualMap） # 异步加载与数据更新 `ECharts`中实现异步数据的更新非常简单，在图表初始化后不管任何时候只要异步获取数据后通过`setOption`填入数据和配置项就行。先设置一个空的直角坐标轴，获取数据后填入数据： ``` var myChart = echarts.init(document.getElementById('main')); // 显示标题，图例和空的坐标轴 myChart.setOption({ title: { text: '异步数据加载示例' }, tooltip: {}, legend: { data:['销量'] }, xAxis: { data: [] }, yAxis: {}, series: [{ name: '销量', type: 'bar', data: [] }] }); // 异步加载数据 $.get('data.json').done(function (data) { // 填入数据 myChart.setOption({ xAxis: { data: data.categories }, series: [{ // 根据名字对应到相应的系列 name: '销量', data: data.data }] }); }); ``` ## loading 动画 ECharts 默认有提供了一个简单的加载动画。只需要调用 `showLoading` 方法显示。数据加载完成后再调用 `hideLoading` 方法隐藏加载动画。 ```js myChart.showLoading(); $.get('data.json').done(function (data) { myChart.hideLoading(); myChart.setOption(...); }); ``` ## 数据动态更新 [https://www.echartsjs.com/gallery/editor.html?c=doc-example/tutorial-dynamic-data](https://www.echartsjs.com/gallery/editor.html?c=doc-example/tutorial-dynamic-data) # 配置来源：[https://www.cnblogs.com/1996zy/p/8963385.html](https://www.cnblogs.com/1996zy/p/8963385.html) ## 1、title（图表标题） ```js title: { x: 'left', // 水平安放位置，默认为左对齐，可选为：'center' | 'left' | 'right' | {number}（x坐标，单位px） y: 'top', // 垂直安放位置，默认为全图顶端，可选为：'top' |'bottom' | 'center' | {number}（y坐标，单位px） // textAlign: null // 水平对齐方式，默认根据 x 设置自动调整 backgroundColor: 'rgba(0,0,0,0)', borderColor: '#ccc', // 标题边框颜色 borderWidth: 0, // 标题边框线宽，单位 px，默认为 0（无边框） padding: 5, // 标题内边距，单位 px，默认各方向内边距为 5， // 接受数组分别设定上右下左边距，同 css itemGap: 10, // 主副标题纵向间隔，单位px，默认为10， textStyle: { fontSize: 18, fontWeight: 'bolder', color: '#333' // 主标题文字颜色 }, subtextStyle: { color: '#aaa' // 副标题文字颜色 }, text: '', // 主标题文本 subtext: '' // 副标题文本 } ``` ## 2、legend（图例组件）示例：[https://www.echartsjs.com/gallery/editor.html?c=pie-legend&edit=1&reset=1](https://www.echartsjs.com/gallery/editor.html?c=pie-legend&edit=1&reset=1) ![](https://img.kancloud.cn/6f/49/6f49cd3471e11bd4818e6022df84a02b_971x744.png =400x) 图例组件展现了不同系列的标记(symbol)，颜色和名字。可以通过点击图例控制哪些系列不显示。当图例数量过多时，可以使用滚动图例（垂直）或滚动图例（水平），通过`legend.type`来控制 `plain`：普通图例。缺省就是普通图例。 `scroll`：可滚动翻页的图例。当图例数量较多时可以使用。如果设置为 scroll，可以有更多的细节配置：[https://echarts.baidu.com/option.html#legend.type](https://echarts.baidu.com/option.html#legend.type) ```js legend: { type: 'plain', // 缺省为 plain，图例较多时可使用 scroll orient: 'horizontal', // 布局方式，默认为水平布局，可选为：'horizontal' | 'vertical' top: 20, left: 20, // 像素值 | 百分比 | left | center | right bottom: 20, // 像素值 | 百分比 | top | middle | bottom right: 20, // 图例距容器上 | 右 | 下 | 左的距离 width: .., // 图例宽度，默认自适应 itemGap: 10, // 各个item之间的间隔，单位px，默认为10， itemWidth: 20, // 图例图形宽度 itemHeight: 14, // 图例图形高度 textStyle: { color: '#333' // 图例文字颜色 } }, ```