起风网什么是ECharts？
ECharts是百度团队开发的一个可以个性定制的数据可视化的图标库。数据可视化是指将数据以图形的形式进行显示。比如
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <style> .man, .wom{ width: 300px; height: 30px; color: #fff; } .man{ background-color: blue; } .wom{ width: 400px; background-color: red; } </style> </head> <body> <p>分别将男女的个数用图形显示</p> <div class="man">200个男性</div> <div class="wom">250 个女性</div> </body></html>作用：将数据可视化，让数据更加直观。
使用
1、引入ECharts
<script src="AMD"></script> //引用AMD<script src="local"></script> //也可以下载ECharts到本地引入2、创建一个存放ECharts的图形容器（比如div）
<div class="echarts" style="height: 400px;width: 400px; border: 1px solid blue; padding: 20px;"></div>3、初始化一个ECharts的实例
jsvar demo = ECharts.init(document.querySelectior('div')) //将ECharts的图表放到div容器中显示。4、图表的数据和配置项
var option = { title: { text: 'ECharts 入门示例' }, tooltip: {}, legend: { data:['销量'] }, xAxis: { data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"] }, yAxis: {}, series: [{ name: '销量', type: 'bar', data: [5, 20, 36, 10, 10, 20] }] };5、进行显示图表
demo.setOption(option); //将数据在图表中进行显示6、完整的demo
<body> <div class="echarts" style="height: 400px;width: 400px; border: 1px solid blue; padding: 20px;"></div> <script src="https://cdn.bootcss.com/echarts/4.1.0.rc2/echarts-en.common.js"></script> <script> var div = document.querySelector(".echarts"), demoEcharts = echarts.init(div); var option = { title: { text: 'ECharts 入门示例' }, tooltip: {}, legend: { data:['销量'] }, xAxis: { data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"] }, yAxis: {}, series: [{ name: '销量', type: 'bar', data: [5, 20, 36, 10, 10, 20] }] }; demoEcharts.setOption(option); </script> </body>更详细看官网ECharts
vue使用ECharts
安装
1、通过npm安装命令
$ npm install echarts –save-dev
成功就会显示 + echarts@4.1.0（数字是版本号）
2、全局配置echarts
main.js文件配置import ECharts from "vue-echarts/components/ECharts" //全局引入echartsimport 'echarts/lib/chart/bar' //引入bar工具import 'echarts/lib/components/toopic' //引入提示工具Vue.component('echart' , ECharts);//全局引用echarts模板3、如果使用了vue-cli创建项目更改build/webpack.base.conf.js文件部分内容
{ test: /\.js$/, loader: 'babel-loader',- include: [resolve('src'), resolve('test')]+ include: [+ resolve('src'),+ resolve('test'),+ resolve('node_modules/vue-echarts'),+ resolve('node_modules/resize-detector')+ ] }4、单文件组件配置
<template><chart :options="polar"></chart></template><style>.echarts { height: 300px;}</style><script>export default { data: function () { let data = [] for (let i = 0; i <= 360; i++) { let t = i / 180 * Math.PI let r = Math.sin(2 * t) * Math.cos(2 * t) data.push([r, i]) } return { polar: { title: { text: '极坐标双数值轴' }, legend: { data: ['line'] }, polar: { center: ['50%', '54%'] }, tooltip: { trigger: 'axis', axisPointer: { type: 'cross' } }, angleAxis: { type: 'value', startAngle: 0 }, radiusAxis: { min: 0 }, series: [ { coordinateSystem: 'polar', name: 'line', type: 'line', showSymbol: false, data: data } ], animationDuration: 2000 } } }}</script>在vue的项目中配置了上面所说的设置就可以在vue项目中显示echarts了，但是当插入到echarts中的饼图时，你的项目会报错说请预先设置pie，怎样解决这个问题呢？
在原先配置好的main.js中引入echarts
import echarts from 'echarts' //添加import 'echarts/lib/chart/bar'import 'echarts/lib/component/tooltip'文章转载于:https://www.jianshu.com/p/259280bf1d53
原著是一个有趣的人,若有侵权,请通知删除
评论前必须登录！
立即登录