怎么在html里面引入echarts,echarts的使用方法

Echarts官网

1.单页面中使用

1. 先引入Echarts.js文件

2. 或者引用线上地址

复制代码

复制代码

3. 设置一个容器(必须有宽度和高度)

复制代码

复制代码

4. 获取盒子元素操作

let box = echarts.init(document.getElementById("box"))

复制代码

复制代码

5. 在Echarts官网上进行引入所需的数据

option = {

title: {

text: '堆叠区域图'

},

tooltip: {

trigger: 'axis',

axisPointer: {

type: 'cross',

label: {

backgroundColor: '#6a7985'

}

}

},

legend: {

data: ['邮件营销', '联盟广告', '视频广告', '直接访问', '搜索引擎']

},

toolbox: {

feature: {

saveAsImage: {}

}

},

grid: {

left: '4%',

right: '4%',

bottom: '3%',

containLabel: true

},

xAxis: [

{

type: 'category',

boundaryGap: false,

data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']

}

],

yAxis: [

{

type: 'value'

}

],

series: [

{

name: '邮件营销',

type: 'line',

stack: '总量',

areaStyle: {},

data: [120, 132, 101, 134, 90, 230, 210]

},

{

name: '联盟广告',

type: 'line',

stack: '总量',

areaStyle: {},

data: [220, 182, 191, 234, 290, 330, 310]

},

{

name: '视频广告',

type: 'line',

stack: '总量',

areaStyle: {},

data: [150, 232, 201, 154, 190, 330, 410]

},

{

name: '直接访问',

type: 'line',

stack: '总量',

areaStyle: {},

data: [320, 332, 301, 334, 390, 330, 320]

},

{

name: '搜索引擎',

type: 'line',

stack: '总量',

label: {

normal: {

show: true,

position: 'top'

}

},

areaStyle: {},

data: [820, 932, 901, 934, 1290, 1330, 1320]

}

]

};

复制代码

复制代码

6. 给元素绑定数据

ech.setOption(option)

复制代码

复制代码

7. 图表效果

2.vue项目中使用

1.安装依赖

vue2.0框架

npm install echarts

vue3.0框架

npm add echarts

2.引入相关文件

· 全局引入

在 min.js 中引入 import echarts from 'echarts Vue.prototype.$echarts = echarts

· 按需引入

在单个组件中引用

// echarts 按需引入

let echarts2 = require('echarts/lib/echarts')

// 引入折线图等组件

require('echarts/lib/chart/line')

require('echarts/lib/chart/bar')

require('echarts/lib/chart/radar')

// 引入提示框和title组件，图例

require('echarts/lib/component/tooltip')

require('echarts/lib/component/title')

require('echarts/lib/component/legend')

Vue.prototype.$echarts2 = echarts2

复制代码

复制代码

3.代码示例

export default {

name: "app",

components: {},

mounted() {

this.initChart();

},

data() {

return {};

},

methods: {

initChart() {

let bos = this.$echarts.init(document.getElementById("box"));

// 绘制图表

bos.setOption(this.setOption1("我是柱状图"));

},

setOption1(title) {

let option = {

title: { text: title },

tooltip: {},

xAxis: {

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

},

yAxis: {},

series: [

{

name: "销量",

type: "bar",

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

}

]

};

return option;

}

}

};

.bos {

width: 500px;

height: 300px;

margin: 0 auto;

}

复制代码

饼状图写法

1

2

3

4

5

饼状图练习

6

7 #pic1{

8 width:400px;

9 height:400px;

10 margin: 20px auto;

11 }

12

13

14

15

16

17

18 var myCharts1 = echarts.init(document.getElementById('pic1'));

19 var option1 = {

20 backgroundColor: 'white',

21

22 title: {

23 text: '课程内容分布',

24 left: 'center',

25 top: 20,

26 textStyle: {

27 color: '#ccc'

28 }

29 },

30 tooltip : {

31 trigger: 'item',

32 formatter: "{a}
{b} : {d}%"

33 },

34

35 visualMap: {

36 show: false,

37 min: 500,

38 max: 600,

39 inRange: {

40 colorLightness: [0, 1]

41 }

42 },

43 series : [

44 {

45 name:'课程内容分布',

46 type:'pie',

47 clockwise:'true',

48 startAngle:'0',

49 radius : '60%',

50 center: ['50%', '50%'],

51 data:[

52 {

53 value:70,

54 name:'语言',

55 itemStyle:{

56 normal:{

57 color:'rgb(255,192,0)',

58 shadowBlur:'90',

59 shadowColor:'rgba(0,0,0,0.8)',

60 shadowOffsetY:'30'

61 }

62 }

63 },

64 {

65 value:10,

66 name:'美国科学&社会科学',

67 itemStyle:{

68 normal:{

69 color:'rgb(1,175,80)'

70 }

71 }

72 },

73 {

74 value:20,

75 name:'美国数学',

76 itemStyle:{

77 normal:{

78 color:'rgb(122,48,158)'

79 }

80 }

81 }

82

83 ],

84 }

85 ]

86 };

87 myCharts1.setOption(option1);

88

89

90

复制代码