Echarts

1.安装引入Echarts

npm install echarts --save
项目入口文件main.js中引入Echarts

2.1 import echarts from 'echarts';

2.2 Vue.prototype.$echarts = echarts
按需引入在需要的组件引入

var echarts=require('echarts')

2.echarts的基本用法

  1.初始化类
  html里面创建一个id为main的div,并初始化echarts绘图实例
  2.样式配置
  **title：标题**
  **tooltip:鼠标悬停气泡**
  **xAxis:配置横轴类别，type类型为category类别**
  **series:销量数据 data参数与横轴一一对应，如果想要调样式，也可以简单调整，比如每个条形图的颜色可以通过函数进行数组返回渲染**
  3.渲染图展示
  myChart.setOption(option)

3.echarts图表配置

先引入

//引入基本模板

let echarts = require("echarts/lib/echarts");

//引入柱状图

require("echarts/lib/chart/bar");

// 引入提示框和title组件

require("echarts/lib/component/tooltip");

require("echarts/lib/component/title");
然后设置盒子
基于准备好的dom，初始化echarts实例

var myChart = echarts.init(document.getElementById("charts"));

methods: {

drawLine() {

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

let myChart = echarts.init(document.getElementById("barchart"));

// 绘制图表

myChart.setOption({

title: { text: "在Vue中使用echarts" },

tooltip: {},

xAxis: { //X轴

data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"]

},

yAxis: {}, //Y轴

series: [

{

name: "销量",

type: "bar",

data: [5, 20, 36, 10, 10, 20]

}

]

});

}

}

3.饼图详解

1.引入：var echarts = require("echarts");
设置div盒子，渲染图表的< div id="charts" style="width: 600px;height:400px;">
初始化图表 var myChart=echarts.init(document.getElementById('charts'));

var myChart = echarts.init(document.getElementById("charts"));

myChart.setOption({

series: [

{

name: "访问来源",

type: "pie",

radius: "55%",

itemStyle: {

normal: {

//阴影大小

shadowBlur: 200,

//阴影水平方向上的偏移

shadowOffsetX: 0,

//阴影垂直方向上的偏移

shadowOffsetY: 0,

//阴影颜色

shadowColor: "rgba(0,0,0,0.5)"

}

},

data: [

{ value: 400, name: "考点专练" },

{ value: 335, name: "套卷练习" },

{ value: 310, name: "仿真模考" }

]

}

]

});

4.饼图高级环形图

1.引入：var echarts = require("echarts");
设置div盒子，渲染图表的< div id="charts" style="width: 600px;height:400px;">
初始化图表 var myChart=echarts.init(document.getElementById('charts'));

myChart.setOption({

legend: {

// orient: "vertical",

data: ["考点专练", "套卷练习", "仿真模考"],

position: "left",

color: "black"

tooltip: {

trigger: "item",

formatter: "{a}
{b}: {c} ({d}%)"

series: [

{

type: "pie",

radius: ["40%", "80%"], //调试圆形

avoidLabelOverlap: false,

label: {

show: false,

position: "center" //定位

emphasis: {

label: {

show: true,

fontSize: "26",//改字体大小

fontWeight: "bold",//加粗

color: "orange"//颜色

}

labelLine: {

show: false

data: [

{

value: 460,

{

value: 530,

{

value: 430,

}

]

}

]

});

5.饼图高级嵌套

1.引入：var echarts = require("echarts");
设置div盒子，渲染图表的< div id="charts" style="width: 600px;height:400px;">
初始化图表 var myChart=echarts.init(document.getElementById('charts'));

option = { tooltip: { trigger: 'item', formatter: '{a} {b}: {c} ({d}%)' }, legend: { orient: 'vertical', left: 10, //配置图表的数据 data: ['直达', '营销广告', '搜索引擎', '邮件营销', '联盟广告', '视频广告', '百度', '谷歌', '必应', '其他'] }, series: [ { name: '访问来源', type: 'pie', selectedMode: 'single', radius: [0, '30%'],

       label: {
           position: 'inner'
       },
       labelLine: {
           show: false
       },
       data: [
           {value: 335, name: '直达', selected: true},
           {value: 679, name: '营销广告'},
           {value: 1548, name: '搜索引擎'}
       ]
   },
   {
       name: '访问来源',
       type: 'pie',
       radius: ['40%', '55%'],
       label: {
           formatter: '{a|{a}}{abg|}\n{hr|}\n  {b|{b}：}{c}  {per|{d}%}  ',
           backgroundColor: '#eee',
           borderColor: '#aaa',
           borderWidth: 1,
           borderRadius: 4,
           // shadowBlur:3,
           // shadowOffsetX: 2,
           // shadowOffsetY: 2,
           // shadowColor: '#999',
           // padding: [0, 7],
           rich: {
               a: {
                   color: '#999',
                   lineHeight: 22,
                   align: 'center'
               },
               // abg: {
               //     backgroundColor: '#333',
               //     width: '100%',
               //     align: 'right',
               //     height: 22,
               //     borderRadius: [4, 4, 0, 0]
               // },
               hr: {
                   borderColor: '#aaa',
                   width: '100%',
                   borderWidth: 0.5,
                   height: 0
               },
               b: {
                   fontSize: 16,
                   lineHeight: 33
               },
               per: {
                   color: '#eee',
                   backgroundColor: '#334455',
                   padding: [2, 4],
                   borderRadius: 2
               }
           }
       },
       data: [
           {value: 335, name: '直达'},
           {value: 310, name: '邮件营销'},
           {value: 234, name: '联盟广告'},
           {value: 135, name: '视频广告'},
           {value: 1048, name: '百度'},
           {value: 251, name: '谷歌'},
           {value: 147, name: '必应'},
           {value: 102, name: '其他'}
       ]
   }

] }

6.散点图高级提示信息及坐标轴地自定义

1.引入：var echarts = require("echarts");
设置div盒子，渲染图表的< div id="charts" style="width: 600px;height:400px;">
初始化图表 var myChart=echarts.init(document.getElementById('charts'));
配置数据

7.气泡图

1.引入：var echarts = require("echarts");
设置div盒子，渲染图表的< div id="charts" style="width: 600px;height:400px;">
初始化图表 var myChart=echarts.init(document.getElementById('charts'));
配置数据

8.雷达图

1.引入：var echarts = require("echarts");
设置div盒子，渲染图表的< div id="charts" style="width: 600px;height:400px;">
初始化图表 var myChart=echarts.init(document.getElementById('charts'));
配置数据

option = { title: { text: '浏览器占比变化', subtext: '纯属虚构', top: 10, left: 10 }, tooltip: { trigger: 'item', backgroundColor: 'rgba(0,0,250,0.2)' }, legend: { type: 'scroll', bottom: 10, data: (function (){ var list = []; for (var i = 1; i <=28; i++) { list.push(i + 2000 + ''); } return list; })() }, visualMap: { top: 'middle', right: 10, color: ['red', 'yellow'], calculable: true }, radar: { indicator: [ { text: 'IE8-', max: 400}, { text: 'IE9+', max: 400}, { text: 'Safari', max: 400}, { text: 'Firefox', max: 400}, { text: 'Chrome', max: 400} ] }, series: (function (){ var series = []; for (var i = 1; i <= 28; i++) { series.push({ name: '浏览器（数据纯属虚构）', type: 'radar', symbol: 'none', lineStyle: { width: 1 }, emphasis: { areaStyle: { color: 'rgba(0,250,0,0.3)' } }, data: [{ value: [ (40 - i) * 10, (38 - i) * 4 + 60, i * 5 + 10, i * 9, i * i /2 ], name: i + 2000 + '' }] }); } return series; })() };

9.地图

10.漏斗图

1.引入：var echarts = require("echarts");
设置div盒子，渲染图表的< div id="charts" style="width: 600px;height:400px;">
初始化图表 var myChart=echarts.init(document.getElementById('charts'));
series: [ { name:'漏斗图', type:'funnel', left: '10%', top: 60, //x2: 80, bottom: 60, width: '80%', // height: {totalHeight} - y - y2, min: 0, max: 100, minSize: '0%', maxSize: '100%', sort: 'descending', gap: 2, label: { show: true, position: 'inside' }, labelLine: { length: 10, lineStyle: { width: 1, type: 'solid' } }, itemStyle: { borderColor: '#fff', borderWidth: 1 }, emphasis: { label: { fontSize: 20 } }, data: [ {value: 60, name: '访问'}, {value: 40, name: '咨询'}, {value: 20, name: '订单'}, {value: 80, name: '点击'}, {value: 100, name: '展现'} ] } ] };

11.仪表盘

Echarts

Echarts

1.安装 引入Echarts

2.echarts的基本用法

3.echarts图表配置

3.饼图详解

4.饼图高级环形图

5.饼图高级嵌套

6.散点图 高级 提示信息及坐标轴地自定义

7.气泡图

8.雷达图

9.地图

10.漏斗图

11.仪表盘

1.安装引入Echarts

6.散点图高级提示信息及坐标轴地自定义