Echarts学习笔记（一）canvas\svg-蒲公英云

官网下载echarts：（选择其一即可）

完整版echarts.min.js
源代码版echarts.js

浏览器画图原理

Canvas

基于像素
单个html，类似于画笔在画布上画画
Echarts基于canvas画图

SVG

基于对象模型
多个图形元素

高保真

<canvas id="myCanvas" width="400" height="400" >
    您的浏览器不支持
</canvas>
<script> // 获取画布对象 var myCanvas = document.getElementById('myCanvas'); var ctx = myCanvas.getContext('2d'); // 开始绘画一个新的路径 ctx.beginPath(); // 设置弧线为蓝色 ctx.strokeStyle = "blue"; var circle = { x : 100,//圆心x轴的坐标 y : 100, r : 50 //圆的半径 }; ctx.arc(circle.x,circle.y,circle.r,0,Math.PI*2,false); // 按照指定的路径绘制弧线 ctx.stroke(); </script>

常见的图形组件

标题、工具栏、图例、提示框
坐标轴
X轴
Y轴

1、HTML结构
2、 Echarts.init()：

初始化Echarts实例
setOption用指定数据绘图
3、Option对象
title标题
图例：legend
X轴：xAxis
数据：series：
- name、type、data

柱状图如下：

<!--bar.html-->
<div id="main" style="width: 1000px;height: 600px;"></div>
    <script> var myCharts = echarts.init(document.getElementById('main')); //指定图标的配置项和数据 var option = { // 标题 title:{ text: 'Echarts 入门示例' }, // 工具箱 toolbox:{ show: true, feature: { saveAsImage: { show: true } } }, // 图例 legend: { data: ['销量'] }, // x轴 xAxis: { data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋"] }, yAxis: { }, // 数据 series: [{ name: '销量', type: 'bar', data: [5,20,37,10,10,20] }] }; // 使用刚设置的数据项和数据显示图标 myCharts.setOption(option); </script>

柱状图和折线图

<!--line.html:type的为line-->
<div id="main" style="width: 1000px;height: 600px;"></div>
    <script> var myCharts = echarts.init(document.getElementById('main')); //指定图标的配置项和数据 var option = { // 标题 title:{ text: 'Echarts 入门示例' }, // 工具箱 toolbox:{ show: true, feature: { saveAsImage: { show: true } } }, // 图例 legend: { data: ['销量'] }, // x轴 xAxis: { data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋"] }, yAxis: { }, // 数据 series: [{ name: '销量', type: 'line',//折线图 data: [7,30,47,30,30] }] }; // 使用刚设置的数据项和数据显示图标 myCharts.setOption(option); </script>

标题组件

text：标题文字
subtext：子标题
left、right、top、bottom标题位置
borderColor：边框颜色

borderWidth：边框宽度

<script> var myCharts = echarts.init(document.getElementById('main')); //指定图标的配置项和数据 var option = { // 标题 title:{ show: true, text: 'Echarts 入门示例', subtext: '学习Echarts，20190511，好好学习', left: 'right',//数字就是像素值，也可以是center left right这种值 borderColor: 'red', borderWidth: 5, textStyle: { color: 'blue', fontSize: 30 } }, // 工具箱 toolbox:{ show: true, feature: { saveAsImage: { show: true } } }, // 图例 legend: { data: ['销量'] }, // x轴 xAxis: { data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"] }, yAxis: { }, // 数据 series: [{ name: '销量', type: 'bar', data: [5,20,37,10,10,40] },{ name: '销量', type: 'line',//折线图 data: [7,30,40,30,30,42] }] }; // 使用刚设置的数据项和数据显示图标 myCharts.setOption(option); </script>

工具栏组件

show：是否显示
feature：具体显示的功能
saveAsImage：保存图片
restore：还原
dataView：数据视图
dataZoom：缩放视图

magicType：动态类型切换

<script> var myCharts = echarts.init(document.getElementById('main')); //指定图标的配置项和数据 var option = { // 标题 title:{ text: 'Echarts 入门示例' }, // 工具箱 toolbox:{ show: true, feature: { dataView:{ show:true }, restore:{ show:true }, dataZoom:{ show:true }, saveAsImage: { show: true }, magicType:{ type: ['line','bar'] } } }, // 图例 legend: { data: ['销量'] }, // x轴 xAxis: { data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋"] }, yAxis: { }, // 数据 series: [{ name: '销量', type: 'bar', data: [5,20,37,10,10,20] }] }; // 使用刚设置的数据项和数据显示图标 myCharts.setOption(option); </script>

*****代码写好了，但是在谷歌访问却乱码了。上面的代码是我之后换了js文件。
就说说我是怎解决的吧
具体解决办法参考本人博客

show：是否显示
trigger：出发方式，axis就是x轴出发
为了避免代码太多，我就只放tooltip的设置部分了！

// 提示框组件
```
        tooltip: { 
            trigger: 'axis'
```
//axis：坐标轴触发，主要在柱状图，折线图等会使用类目轴的图表中使用。
```
        },
```

markPoint

symbol：默认是pin

series: [{ 
                name: '销量',
                type: 'line',
                data: [5,20,37,10,10,20],
                markPoint: { 
                    data: [
                        { type: 'max',name: '最大值'},
                        { type: 'min',name: '最小值',symbol: 'triangle'}
                    ]
                },
                markLine: { 
                    data: [
                        { type: 'average',name: '平均值'}
                    ]
                }
            }]

饼图

pie

饼图展示数据的特点
- 展示百分比
  - type是pie
center圆心坐标
radius半径
name：图例名字
selectMode是否支持多选

<div id="main" style="width: 1000px;height: 600px;"></div>
    <script> var myCharts = echarts.init(document.getElementById('main')); //指定图标的配置项和数据 var option = { // 标题 title:{ text: 'Echarts 入门示例', subtext:'纯属虚构', x:'center' }, // 工具箱 toolbox:{ show: true, feature: { dataView:{ show:true }, restore:{ show:true }, dataZoom:{ show:true }, saveAsImage: { show: true }, // magicType:{ // type: ['line','bar'] // } } }, // 提示框组件 tooltip: { trigger: 'item', //axis：坐标轴触发，主要在柱状图，折线图等会使用类目轴的图表中使用。 formatter:"{a}<br/>{b} : {c} ({d}%)"// }, // 图例 legend: { orient: 'vertical', left:'left', data: ['直接访问','邮件营销','联盟广告','视频广告','搜索引擎'] }, // // x轴 // xAxis: { // // data: ['直接访问','邮件营销','联盟广告','视频广告','搜索引擎'] // }, // yAxis: {}, // 数据 series: [{ name: '访问来源', type: 'pie', radius: '55%', center: ['50%','60%'], data:[ { value:335,name:'直接访问'}, { value:310,name:'邮件营销'}, { value:234,name:'联盟广告'}, { value:135,name:'视频广告'}, { value:1548,name:'搜索引擎'} ] }] }; // 使用刚设置的数据项和数据显示图标 myCharts.setOption(option); </script>

仪表盘

gauge
仪表图展示数据的特点
type是gauge
动态修改仪表盘数据

<div id="main" style="width: 1000px;height: 600px;"></div>
    <script> var myCharts = echarts.init(document.getElementById('main')); //指定图标的配置项和数据 var option = { // 工具箱 toolbox:{ show: true, feature: { saveAsImage: { show: true }, } }, // 提示框组件 tooltip: { trigger: 'item', //axis：坐标轴触发，主要在柱状图，折线图等会使用类目轴的图表中使用。 formatter:"{a}<br/>{b} : {c}%"// }, // 数据 series: [{ name: '业务指标', type: 'gauge', detail:{ formatter:'{value}%'}, data:[ { value:32,name:'完成率'}, ] }] }; // 使用刚设置的数据项和数据显示图标 myCharts.setOption(option); </script>